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

  :root {
    --bg: #07080d;
    /*--accent: #c8f060;*/
    --accent: rgb(238, 104, 108);
    --text: #e8eaf0;
    --muted: rgba(232,234,240,0.72);
    --transition: 0.7s cubic-bezier(0.4,0,0.2,1);
  }


  #portfolioBlock {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: visible;
    overflow-x: hidden;
    /*background: var(--bg);*/
    isolation: isolate;
    --orb-glow: rgba(200,240,96,.08);
    -webkit-user-select: none; /* Safari */
    user-select: none;
  }

  #portfolioBlock::after {
    /*content:''; position:absolute; inset:0; z-index:1000; pointer-events:none;*/
    /*background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");*/
    /*opacity:.45;*/
  }

  .orb {
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
    z-index:0;
    overflow: visible;
    backface-visibility: hidden;
    will-change: transform, opacity;
    contain: paint;
  }
  #orb1 {
    width:80vw;
    height:70vh;
    top:65%;
    left:50%;
    transform:translateX(-50%) translateY(-70%) translateZ(0);
    background:radial-gradient(ellipse,var(--orb-glow) 0%,transparent 70%);
  }

  /* block-scoped canvas behind everything */
  #threeCanvas { position:absolute; inset:0; z-index:1; pointer-events:auto; cursor:grab; touch-action: pan-y; }
  #threeCanvas.dragging { cursor:grabbing; }

  .layout {
    position:relative; z-index:2;
    display:grid;
    grid-template-rows: 1fr auto auto;
    height:100%;
    pointer-events:none;
  }
  .layout > * { pointer-events:auto; }

  /* empty stage — just reserves space so the 3D canvas aligns to it */
  .stage { position:relative; pointer-events:none; }

  .app-info {
    text-align:center; padding: 0 24px 8px; min-height:82px;
  }
  .app-title {
    font-family:'Syne',sans-serif;
    font-size:clamp(1.2rem,3vw,1.9rem); font-weight:700;
    transition: opacity .38s ease, transform .38s ease;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
  }
  .app-desc {
    font-size:.90rem; color:var(--muted); margin-top:5px; line-height:1.65;
    max-width:calc(100% - 40px);
    margin-left:auto; margin-right:auto;
    transition: opacity .38s ease, transform .38s ease;
    font-family: "Exo 2", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .app-info.fading .app-title,
  .app-info.fading .app-desc { opacity:0; transform:translateY(8px); }

  .cta-link {
    display:inline-block;
    margin-top:10px;
    transition: opacity .2s ease, transform .2s ease;
  }
  .cta-link:hover { opacity:.9; transform:translateY(-1px); }
  .cta-link img {
    display:block;
    width:140px;
    height:auto;
    pointer-events:none;
  }

  /* carousel */
  .carousel-section { padding-bottom:30px; }

  .carousel-viewport {
    position:relative; /*overflow:hidden;*/ height:90px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .carousel-viewport::before,
  .carousel-viewport::after {
    content:none;
  }

  .carousel-track {
    position:absolute; top:0; left:0;
    display:flex; align-items:center; gap:10px;
    padding: 17px 0;
    transition: transform .52s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
  }

  .icon-wrap {
    position:relative;
    flex-shrink:0; width:56px; height:56px;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .4s cubic-bezier(0.4,0,0.2,1), opacity .4s ease;
  }
  .icon-wrap:not(.active) { transform:scale(.84); }
  .icon-wrap:not(.active):hover { transform:scale(.91); }
  .icon-wrap.active { opacity:1; transform:scale(1.22); }

  .app-icon {
    width:56px; height:56px; border-radius:14px;
    display:block;
    object-fit:cover;
    background:#10131c;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
    outline:2px solid transparent; outline-offset:3px;
    transition: box-shadow .4s ease, outline .3s ease;
  }
  .icon-wrap.active .app-icon {
    outline-color:var(--accent);
    box-shadow: 0 0 28px rgba(238, 104, 108,.42), 0 8px 20px rgba(0,0,0,.55);
  }

  .icon-progress {
    position:absolute;
    left:8px;
    right:8px;
    bottom:-14px;
    height:2px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    overflow:hidden;
    opacity:0;
    transition:opacity .2s ease;
    pointer-events:none;
  }
  .icon-wrap.active .icon-progress { opacity:1; }

  .icon-progress-fill {
    display:block;
    width:100%;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    transform-origin:left center;
    transform:scaleX(0);
  }