/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./components/navbar.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   SHAIN STUDIO — top bar.
   CSS is VERBATIM from the supplied view-profile.html (the .topbar
   block), mechanically scoped under .sh-topbar. The mock's own
   profile-card dropdown is NOT included — the app has its own.
   ============================================================ */
.sh-topbar{--yellow:#e8c46e}.sh-topbar .topbar{
    position:fixed;top:0;left:0;right:0;height:78px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 34px;z-index:40;
    backdrop-filter:blur(6px);
  }.sh-topbar .logo{display:block;line-height:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;flex-shrink:0}.sh-topbar .logo img{
    height:54px;width:auto;display:block;
    -webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;
    transition:opacity .18s ease;
  }.sh-topbar .logo:hover img{opacity:.85}.sh-topbar .top-right{display:flex;align-items:center;gap:20px}.sh-topbar .credits{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:130px;height:46px;border:1px solid #2c2c30;border-radius:999px;
    background:rgba(20,20,22,.6);line-height:1;
  }.sh-topbar .credits .label{font-size:10px;letter-spacing:1.4px;color:#8e8e95;font-weight:500}.sh-topbar .credits .value{font-size:17px;font-weight:700;color:var(--yellow);margin-top:4px}.sh-topbar .divider-v{width:1px;height:26px;background:#2a2a2e}.sh-topbar .icon-btn{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:transparent;border:none;cursor:pointer;
    color:#dcdce0;position:relative;transition:background .18s ease,color .18s ease;
  }.sh-topbar .icon-btn:hover{background:#1c1c1f;color:#fff}.sh-topbar .badge{
    position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;
    background:#e5342b;color:#fff;font-size:10px;font-weight:600;border-radius:999px;
    display:flex;align-items:center;justify-content:center;border:2px solid #000;
  }.sh-topbar .avatar-btn{
    width:40px;height:40px;border-radius:50%;border:1px solid #2f2f34;background:#161619;
    display:flex;align-items:center;justify-content:center;color:#d6d6db;cursor:pointer;
    transition:border-color .18s ease,color .18s ease;
  }.sh-topbar .avatar-btn:hover{border-color:#43434a}.sh-topbar .avatar-btn.on{border-color:var(--yellow);color:var(--yellow)}.sh-topbar .avatar-btn.open{border-color:var(--yellow);color:var(--yellow)}

  
@media (max-width:900px){.sh-topbar .topbar{padding:0 14px}.sh-topbar .logo img{height:40px}.sh-topbar .credits{min-width:104px}
}


/* ============================================================
   PROFILE DROPDOWN — verbatim from the supplied
   profile_dropdown_only_plus_smaller.html (the .profile-card block and
   its icon animations), scoped under .sh-topbar. The avatar button and
   palette already live above, so their duplicates were dropped.
   ============================================================ */
.sh-topbar .profile-card{
    position:absolute;
    top:calc(100% + 14px);
    right:0;
    width:380px;
    background:#0d0d0f;
    border:1px solid #232326;
    border-radius:24px;
    box-shadow:0 30px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;
    padding:20px 18px 14px;
    z-index:60;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px) scale(.97);
    transform-origin:top right;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }.sh-topbar .profile-card.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.sh-topbar .pc-head{display:flex;align-items:flex-start;gap:16px;padding:0 8px 22px}.sh-topbar .pc-ring{
    position:relative;
    width:68px;height:68px;
    flex-shrink:0;
    border-radius:50%;
    border:1.6px solid var(--yellow);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 22px rgba(232,196,110,.22);
  }.sh-topbar .pc-ring .initial{
    font-family:Georgia,'Times New Roman',serif;
    font-size:38px;font-weight:600;
    color:var(--yellow);
    line-height:1;
  }.sh-topbar .pc-ring .spark{
    position:absolute;top:2px;left:6px;
    width:26px;height:26px;
    pointer-events:none;
  }.sh-topbar .pc-id{display:flex;flex-direction:column;gap:4px;padding-top:4px;min-width:0}.sh-topbar .pc-name{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.2px}.sh-topbar .pc-mail{font-size:14.5px;font-weight:300;color:#c3c3c9;word-break:break-all}.sh-topbar .pc-badge{
    margin-top:9px;
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:9px;
    height:34px;padding:0 20px;
    border:1px solid rgba(232,196,110,.6);
    border-radius:999px;
    color:var(--yellow);
    font-size:13.5px;font-weight:500;
  }.sh-topbar .pc-list{border-top:1px solid #1f1f22}.sh-topbar .pc-item{
    display:flex;align-items:center;gap:18px;
    text-decoration:none;color:inherit;
    padding:13px 8px;
    border-bottom:1px solid #1a1a1d;
    cursor:pointer;
    border-radius:12px;
    transition:background .16s ease;
  }.sh-topbar .pc-item:hover{background:#141417}.sh-topbar .pc-item:last-of-type{border-bottom:none}.sh-topbar .pc-ico{
    width:44px;height:44px;flex-shrink:0;
    border-radius:14px;
    background:#161619;
    border:1px solid #212125;
    display:flex;align-items:center;justify-content:center;
    color:#e6e6ea;
  }.sh-topbar .pc-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.sh-topbar .pc-title{font-size:15px;font-weight:500;color:#fff}.sh-topbar .pc-sub{font-size:12px;font-weight:300;color:#8e8e95}.sh-topbar .pc-arrow{color:var(--yellow);display:flex;flex-shrink:0}.sh-topbar .pc-signout{
    margin-top:10px;
    border:1px solid #1f1f22;
    border-radius:16px;
    background:#0f0f11;
    border-bottom:1px solid #1f1f22;
  }.sh-topbar .pc-signout:hover{background:#151518}.sh-topbar .pc-signout .pc-ico{color:var(--yellow)}

  @media (max-width:900px){.sh-topbar .profile-card{width:min(430px,92vw);right:-8px}
  }

  /* ---------------- ICON ANIMATIONS ---------------- */

  /* staggered entrance for each row */
  @keyframes pcRowIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
  }.sh-topbar .profile-card.show .pc-item{
    animation:pcRowIn .38s cubic-bezier(.22,.9,.3,1) both;
    animation-delay:var(--d,0s);
  }/* icon tile pops + glows on row hover */.sh-topbar .pc-ico{
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),
               background .25s ease,
               border-color .25s ease,
               box-shadow .3s ease,
               color .25s ease;
  }.sh-topbar .pc-item:hover .pc-ico{
    transform:translateY(-3px) scale(1.07);
    background:#1c1c20;
    border-color:rgba(232,196,110,.45);
    color:var(--yellow);
    box-shadow:0 8px 20px rgba(0,0,0,.5), 0 0 18px rgba(232,196,110,.16);
  }/* chevron nudge */.sh-topbar .pc-arrow{transition:transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;opacity:.85}.sh-topbar .pc-item:hover .pc-arrow{transform:translateX(5px);opacity:1}

  /* avatar sparkle twinkle */
  @keyframes pcTwinkle{
    0%,100%{transform:scale(1) rotate(0deg);opacity:1}
    50%{transform:scale(.72) rotate(35deg);opacity:.7}
  }.sh-topbar .pc-ring .spark{animation:pcTwinkle 2.6s ease-in-out infinite;transform-origin:center}

  /* avatar ring breathing glow */
  @keyframes pcRingGlow{
    0%,100%{box-shadow:0 0 18px rgba(232,196,110,.18)}
    50%{box-shadow:0 0 30px rgba(232,196,110,.36)}
  }.sh-topbar .profile-card.show .pc-ring{animation:pcRingGlow 3s ease-in-out infinite}

  /* crown bob on badge hover */
  @keyframes pcCrownBob{
    0%,100%{transform:translateY(0) rotate(0deg)}
    30%{transform:translateY(-2.5px) rotate(-9deg)}
    65%{transform:translateY(-1px) rotate(7deg)}
  }.sh-topbar .pc-badge{transition:background .25s ease, border-color .25s ease}.sh-topbar .pc-badge:hover{background:rgba(232,196,110,.09);border-color:var(--yellow)}.sh-topbar .pc-badge:hover svg{animation:pcCrownBob .7s ease both}

  @media (prefers-reduced-motion:reduce){.sh-topbar .profile-card.show .pc-item,.sh-topbar .pc-ring .spark,.sh-topbar .profile-card.show .pc-ring,.sh-topbar .pc-badge:hover svg{animation:none !important}.sh-topbar .pc-item:hover .pc-ico{transform:none}
  }/* ---- jelly icons: solid glyphs, squash & stretch ---- */.sh-topbar .ico{display:block;flex:none;overflow:visible}.sh-topbar .ico *{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center}.sh-topbar .ico .hole,.sh-topbar .ico .hands,.sh-topbar .ico .dot,.sh-topbar .ico .star{fill:var(--ico-ink,#0f0f11)}.sh-topbar .ico{transform-box:border-box;transform-origin:50% 62%}

  /* whole glyph: squash → stretch → settle */
  @keyframes jJelly{
    0%{transform:scale(1,1)}
    20%{transform:scale(1.26,.76)}
    40%{transform:scale(.79,1.21)}
    58%{transform:scale(1.11,.92)}
    74%{transform:scale(.95,1.05)}
    88%{transform:scale(1.02,.99)}
    100%{transform:scale(1,1)}
  }
  /* softer follow-through for inner details */
  @keyframes jSoft{
    0%{transform:scale(1,1)}
    25%{transform:scale(1.16,.86)}
    47%{transform:scale(.88,1.12)}
    68%{transform:scale(1.05,.97)}
    100%{transform:scale(1,1)}
  }
  /* a part that bounces up and lands */
  @keyframes jBob{
    0%{transform:translateY(0) scale(1,1)}
    24%{transform:translateY(-2.6px) scale(.9,1.16)}
    50%{transform:translateY(.7px) scale(1.12,.88)}
    72%{transform:translateY(-.7px) scale(.98,1.03)}
    100%{transform:translateY(0) scale(1,1)}
  }
  /* elastic pull apart / snap back */
  @keyframes jPullNE{
    0%{transform:translate(0,0)}
    34%{transform:translate(2.8px,-2.8px)}
    60%{transform:translate(-1px,1px)}
    80%{transform:translate(.45px,-.45px)}
    100%{transform:translate(0,0)}
  }
  @keyframes jPullSW{
    0%{transform:translate(0,0)}
    34%{transform:translate(-2.8px,2.8px)}
    60%{transform:translate(1px,-1px)}
    80%{transform:translate(-.45px,.45px)}
    100%{transform:translate(0,0)}
  }
  /* rubber band — stretches long, then recoils */
  @keyframes jRubber{
    0%{transform:scaleX(1)}
    34%{transform:scaleX(1.6)}
    60%{transform:scaleX(.84)}
    80%{transform:scaleX(1.07)}
    100%{transform:scaleX(1)}
  }
  @keyframes jFollow{
    0%{transform:translateX(0)}
    34%{transform:translateX(3.8px)}
    60%{transform:translateX(-1.2px)}
    80%{transform:translateX(.5px)}
    100%{transform:translateX(0)}
  }
  /* swing back like a loose pendulum */
  @keyframes jSwing{
    0%{transform:rotate(0)}
    30%{transform:rotate(-36deg)}
    58%{transform:rotate(13deg)}
    80%{transform:rotate(-4.5deg)}
    100%{transform:rotate(0)}
  }
  /* overshoot pop */
  @keyframes jPop{
    0%{transform:scale(.2) rotate(-40deg);opacity:0}
    50%{transform:scale(1.3) rotate(8deg);opacity:1}
    100%{transform:scale(1) rotate(0);opacity:1}
  }
  /* squeeze horizontally only */
  @keyframes jSqueeze{
    0%{transform:scale(1,1)}
    28%{transform:scale(.76,1.2)}
    54%{transform:scale(1.18,.86)}
    76%{transform:scale(.96,1.03)}
    100%{transform:scale(1,1)}
  }
  /* loose turn that settles back */
  @keyframes jTurn{
    0%{transform:rotate(0)}
    34%{transform:rotate(44deg)}
    62%{transform:rotate(-12deg)}
    82%{transform:rotate(6deg)}
    100%{transform:rotate(0)}
  }/* every glyph jellies as a whole */.sh-topbar .nav-item:hover .ico,.sh-topbar .pc-item:hover .ico{animation:jJelly .78s cubic-bezier(.3,.9,.35,1)}/* whole glyph jellies on row hover */.sh-topbar .pc-item:hover .ico{animation:jJelly .78s cubic-bezier(.3,.9,.35,1)}/* per-icon secondary motion — profile card */.sh-topbar .pc-item:hover .i-profile .head{animation:jBob .78s cubic-bezier(.3,.9,.35,1) .07s}.sh-topbar .pc-item:hover .i-profile .torso{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .02s}.sh-topbar .pc-item:hover .i-sub .stripe{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .06s}.sh-topbar .pc-item:hover .i-sub .star{animation:jPop .6s cubic-bezier(.3,.9,.35,1) .12s backwards}.sh-topbar .pc-item:hover .i-gear .cog{animation:jTurn .78s cubic-bezier(.3,.9,.35,1)}.sh-topbar .pc-item:hover .i-gear .core{animation:jPop .55s cubic-bezier(.3,.9,.35,1) .12s backwards}.sh-topbar .pc-item:hover .i-credits .hands{animation:jSwing .78s cubic-bezier(.3,.9,.35,1) .05s;transform-origin:50% 88%}.sh-topbar .pc-item:hover .i-out .shaft{animation:jRubber .78s cubic-bezier(.3,.9,.35,1);transform-origin:0% 50%}.sh-topbar .pc-item:hover .i-out .tip{animation:jFollow .78s cubic-bezier(.3,.9,.35,1)}.sh-topbar .pc-item:hover .i-out .door{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .05s}/* knock-out colour tracks whatever the tile sits on */.sh-topbar .pc-ico{--ico-ink:#161619}.sh-topbar .pc-item:hover .pc-ico{--ico-ink:#1c1c20}

  
  @media (prefers-reduced-motion:reduce){.sh-topbar .ico,.sh-topbar .ico *{animation:none !important}
  }

/* ============================================================
   ADDITIONS — only what the static mock had no need for.
   Nothing above this line was altered.
   ============================================================ */

/* The mock sat at z-40 because nothing else on its page was fixed. Here the
   bar must stay above the app's own fixed panels, as the old bar did. */
.sh-topbar .topbar{z-index:50}

/* The credits block is a real button now (it opens credit history). */
.sh-topbar .credits{cursor:pointer;font-family:inherit;padding:0}
.sh-topbar .credits:hover{border-color:#3d3d43}

/* Signed-out state, which the mock never showed. */
.sh-topbar .signin{
  display:flex;align-items:center;height:40px;padding:0 22px;border-radius:999px;
  background:var(--yellow);color:#191400;
  font-size:13.5px;font-weight:600;text-decoration:none;
  transition:filter .18s ease,transform .18s ease;
}
.sh-topbar .signin:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* Light mode: the mock is dark-only, and its near-white icons would vanish
   against a light page. */
:root.light-mode .sh-topbar .icon-btn{color:#3a3a42}
:root.light-mode .sh-topbar .icon-btn:hover{background:rgba(0,0,0,.06);color:#0f0f12}
:root.light-mode .sh-topbar .credits{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.12)}
:root.light-mode .sh-topbar .credits .label{color:#6b6b73}
:root.light-mode .sh-topbar .divider-v{background:rgba(0,0,0,.12)}
:root.light-mode .sh-topbar .avatar-btn{background:#fff;border-color:rgba(0,0,0,.14);color:#3a3a42}
:root.light-mode .sh-topbar .avatar-btn:hover{border-color:rgba(0,0,0,.28)}
:root.light-mode .sh-topbar .badge{border-color:#fff}

/* The dropdown's click-away layer. The mock closed on any document click; a
   real app needs the rest of the page to stay clickable when it is shut, so
   the scrim only exists while the card is open. */
.sh-topbar .pc-scrim{position:fixed;inset:0;z-index:60}
.sh-topbar .profile-card{z-index:70}
/* Rows are buttons here (they run router pushes, not hrefs), so the button
   defaults have to be cleared to match the mock's anchors. */
.sh-topbar .pc-item{
  width:100%;text-align:left;background:none;border:0;font-family:inherit;cursor:pointer;
}
/* Real accounts have a Google picture; the mock only had the gold initial. */
.sh-topbar .pc-ring img{width:100%;height:100%;border-radius:50%;-o-object-fit:cover;object-fit:cover;display:block}

/* The dropdown's own anchor. It is mounted by two different bars — one inside
   .sh-topbar, one not — so it brings its scope with it and positions against
   this fixed strip rather than whatever happens to be around it. Zero width and
   bar-height, so the mock's `top:calc(100% + 14px); right:0` lands the card
   just under the bar at the right edge either way. */
.sh-topbar.pc-portal{
  position:fixed;top:0;right:0;width:0;height:78px;z-index:70;pointer-events:none;
}
.sh-topbar.pc-portal .profile-card{right:24px;pointer-events:auto}
.sh-topbar.pc-portal .pc-scrim{pointer-events:auto}
/* The mock's wrapper — restored: the card is absolutely positioned and needs a
   positioned ancestor. It was lost when the topbar CSS was first extracted. */
.sh-topbar .profile-wrap{position:relative}
@media (max-width:900px){
  .sh-topbar.pc-portal{height:64px}
  .sh-topbar.pc-portal .profile-card{right:12px}
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./components/topbar-icons.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   SHAIN STUDIO — top-bar glyph motion.

   The same jelly the dropdown and the left rail use, for the bell
   and the account button. The @keyframes are the supplied mock's,
   copied verbatim so this file stands on its own — identical
   definitions, so load order makes no difference.

   A button opts in with `sh-jelly`; the effect fires on HOVER ONLY.
   ============================================================ */

@keyframes jJelly{
    0%{transform:scale(1,1)}
    20%{transform:scale(1.26,.76)}
    40%{transform:scale(.79,1.21)}
    58%{transform:scale(1.11,.92)}
    74%{transform:scale(.95,1.05)}
    88%{transform:scale(1.02,.99)}
    100%{transform:scale(1,1)}
  }
@keyframes jSoft{
    0%{transform:scale(1,1)}
    25%{transform:scale(1.16,.86)}
    47%{transform:scale(.88,1.12)}
    68%{transform:scale(1.05,.97)}
    100%{transform:scale(1,1)}
  }
@keyframes jBob{
    0%{transform:translateY(0) scale(1,1)}
    24%{transform:translateY(-2.6px) scale(.9,1.16)}
    50%{transform:translateY(.7px) scale(1.12,.88)}
    72%{transform:translateY(-.7px) scale(.98,1.03)}
    100%{transform:translateY(0) scale(1,1)}
  }
@keyframes jSwing{
    0%{transform:rotate(0)}
    30%{transform:rotate(-36deg)}
    58%{transform:rotate(13deg)}
    80%{transform:rotate(-4.5deg)}
    100%{transform:rotate(0)}
  }

/* ---- glyph base ---- */
.sh-jelly .ico{display:block;flex:none;overflow:visible}
.sh-jelly .ico *{
  fill:currentColor;stroke:none;
  transform-box:fill-box;transform-origin:center;
}
.sh-jelly .ico{transform-box:border-box;transform-origin:50% 62%}

/* ---- whole glyph, then the parts ---- */
.sh-jelly:hover .ico{animation:jJelly .78s cubic-bezier(.3,.9,.35,1)}

/* a bell swings from its crown, not its middle, and the clapper trails it */
.sh-jelly:hover .i-bell .dome{
  animation:jSwing .78s cubic-bezier(.3,.9,.35,1);
  transform-origin:50% 10%;
}
.sh-jelly:hover .i-bell .clapper{
  animation:jSwing .78s cubic-bezier(.3,.9,.35,1) .08s;
  transform-origin:50% -140%;
}

/* head bobs, shoulders follow — the dropdown's profile row, verbatim */
.sh-jelly:hover .i-user .head{animation:jBob .78s cubic-bezier(.3,.9,.35,1) .07s}
.sh-jelly:hover .i-user .torso{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .02s}

/* A disabled control shouldn't invite a hover it won't answer. */
.sh-jelly:disabled:hover .ico,
.sh-jelly:disabled:hover .ico *{animation:none !important}

@media (prefers-reduced-motion:reduce){
  .sh-jelly .ico,.sh-jelly .ico *{animation:none !important}
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./components/sidebar.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   SHAIN STUDIO — left rail glyphs.

   The jelly system from the profile dropdown, applied to the six
   workspace icons. The @keyframes below are the supplied mock's,
   copied verbatim from navbar.css so the rail is self-contained —
   identical definitions, so it makes no difference which file loads
   first.

   Everything is scoped under .sh-rail and fires on HOVER ONLY.
   ============================================================ */

@keyframes jJelly{
    0%{transform:scale(1,1)}
    20%{transform:scale(1.26,.76)}
    40%{transform:scale(.79,1.21)}
    58%{transform:scale(1.11,.92)}
    74%{transform:scale(.95,1.05)}
    88%{transform:scale(1.02,.99)}
    100%{transform:scale(1,1)}
  }
@keyframes jSoft{
    0%{transform:scale(1,1)}
    25%{transform:scale(1.16,.86)}
    47%{transform:scale(.88,1.12)}
    68%{transform:scale(1.05,.97)}
    100%{transform:scale(1,1)}
  }
@keyframes jBob{
    0%{transform:translateY(0) scale(1,1)}
    24%{transform:translateY(-2.6px) scale(.9,1.16)}
    50%{transform:translateY(.7px) scale(1.12,.88)}
    72%{transform:translateY(-.7px) scale(.98,1.03)}
    100%{transform:translateY(0) scale(1,1)}
  }
@keyframes jPullNE{
    0%{transform:translate(0,0)}
    34%{transform:translate(2.8px,-2.8px)}
    60%{transform:translate(-1px,1px)}
    80%{transform:translate(.45px,-.45px)}
    100%{transform:translate(0,0)}
  }
@keyframes jPullSW{
    0%{transform:translate(0,0)}
    34%{transform:translate(-2.8px,2.8px)}
    60%{transform:translate(1px,-1px)}
    80%{transform:translate(-.45px,.45px)}
    100%{transform:translate(0,0)}
  }
@keyframes jRubber{
    0%{transform:scaleX(1)}
    34%{transform:scaleX(1.6)}
    60%{transform:scaleX(.84)}
    80%{transform:scaleX(1.07)}
    100%{transform:scaleX(1)}
  }
@keyframes jFollow{
    0%{transform:translateX(0)}
    34%{transform:translateX(3.8px)}
    60%{transform:translateX(-1.2px)}
    80%{transform:translateX(.5px)}
    100%{transform:translateX(0)}
  }
@keyframes jSwing{
    0%{transform:rotate(0)}
    30%{transform:rotate(-36deg)}
    58%{transform:rotate(13deg)}
    80%{transform:rotate(-4.5deg)}
    100%{transform:rotate(0)}
  }
@keyframes jPop{
    0%{transform:scale(.2) rotate(-40deg);opacity:0}
    50%{transform:scale(1.3) rotate(8deg);opacity:1}
    100%{transform:scale(1) rotate(0);opacity:1}
  }
@keyframes jSqueeze{
    0%{transform:scale(1,1)}
    28%{transform:scale(.76,1.2)}
    54%{transform:scale(1.18,.86)}
    76%{transform:scale(.96,1.03)}
    100%{transform:scale(1,1)}
  }
@keyframes jTurn{
    0%{transform:rotate(0)}
    34%{transform:rotate(44deg)}
    62%{transform:rotate(-12deg)}
    82%{transform:rotate(6deg)}
    100%{transform:rotate(0)}
  }

/* ---- glyph base (mirrors the dropdown's .ico rules) ---- */
.sh-rail .ico{display:block;flex:none;overflow:visible}
.sh-rail .ico *{
  fill:currentColor;stroke:none;
  transform-box:fill-box;transform-origin:center;
}
/* Cut-outs paint in the rail's own background, so a solid glyph still reads
   as an outline. Set per-state below because the rail is translucent. */
.sh-rail .ico .hole{fill:var(--ico-ink,#0b0b0d)}
.sh-rail .ico{transform-box:border-box;transform-origin:50% 62%}

/* ---- the effect: whole glyph, then each part a beat later ---- */
.sh-rail .nav-item:hover .ico{animation:jJelly .78s cubic-bezier(.3,.9,.35,1)}

.sh-rail .nav-item:hover .i-home .roof{animation:jBob .78s cubic-bezier(.3,.9,.35,1) .07s}
.sh-rail .nav-item:hover .i-home .body{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .02s}

.sh-rail .nav-item:hover .i-image .frame{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .02s}
.sh-rail .nav-item:hover .i-image .sun{animation:jPop .6s cubic-bezier(.3,.9,.35,1) .12s backwards}
.sh-rail .nav-item:hover .i-image .hills{animation:jFollow .78s cubic-bezier(.3,.9,.35,1) .06s}

.sh-rail .nav-item:hover .i-shoot .body{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .02s}
.sh-rail .nav-item:hover .i-shoot .lens{animation:jPop .6s cubic-bezier(.3,.9,.35,1) .1s backwards}
.sh-rail .nav-item:hover .i-shoot .flash{animation:jBob .78s cubic-bezier(.3,.9,.35,1) .06s}

/* the two arrows pull apart and snap back — jPullNE/jPullSW were drawn for
   exactly this shape and had gone unused */
.sh-rail .nav-item:hover .i-upscale .arrowNE{animation:jPullNE .78s cubic-bezier(.3,.9,.35,1)}
.sh-rail .nav-item:hover .i-upscale .arrowSW{animation:jPullSW .78s cubic-bezier(.3,.9,.35,1)}

.sh-rail .nav-item:hover .i-video .plate{animation:jSqueeze .78s cubic-bezier(.3,.9,.35,1)}
.sh-rail .nav-item:hover .i-video .play{animation:jPop .6s cubic-bezier(.3,.9,.35,1) .12s backwards}
.sh-rail .nav-item:hover .i-video .lensBody{animation:jFollow .78s cubic-bezier(.3,.9,.35,1) .05s}

.sh-rail .nav-item:hover .i-files .front{animation:jBob .78s cubic-bezier(.3,.9,.35,1) .05s}
.sh-rail .nav-item:hover .i-files .back{animation:jSoft .78s cubic-bezier(.3,.9,.35,1)}

/* Cut-outs move with the shape they sit in. Without this the hole keeps still
   while its parent squashes, and the door slides out of the house. */
.sh-rail .nav-item:hover .i-home .door{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .02s}
.sh-rail .nav-item:hover .i-shoot .bulb{animation:jSoft .78s cubic-bezier(.3,.9,.35,1) .02s}
.sh-rail .nav-item:hover .i-files .tab{animation:jBob .78s cubic-bezier(.3,.9,.35,1) .05s}

/* A locked tab shouldn't wiggle — nothing happens when you click it. */
.sh-rail .nav-item.is-locked:hover .ico,
.sh-rail .nav-item.is-locked:hover .ico *{animation:none !important}

@media (prefers-reduced-motion:reduce){
  .sh-rail .ico,.sh-rail .ico *{animation:none !important}
}