/* JingleEngle ornamentation v2026.09.06.5.
   Decoration belongs to section gaps and panel edges. Hover highlights use
   transform-only motion inside a masked rim; content and controls stay clear. */

:root{
  --je-trim-cool:#00e5ff;
  --je-trim-warm:#ff914d;
  --je-trim-light:#edf7ff;
  --je-engraving:url('../images/ornaments/engraving-v1.webp');
  --je-frieze:url('../images/ornaments/frieze-v1.webp');
  --je-diamond:url('../images/ornaments/diamond.svg');
  --je-hero-art:url('../images/ornaments/hero-frame-v1.webp');
  --je-bright-spectrum:conic-gradient(from 12deg,#07333d 0deg,#00e5ff 46deg,#f3fdff 64deg,#00e5ff 78deg,#0b1522 122deg,#ff914d 174deg,#fff1d8 192deg,#ff914d 208deg,#0b1522 254deg,#00e5ff 306deg,#f3fdff 326deg,#07333d 360deg);
}

/* Generated artwork is seated in existing trim spaces, not over the page. */
.je-section-ornament{
  background:var(--je-frieze) center/cover no-repeat;
  border:1px solid rgba(255,145,77,.62);
  border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(237,247,255,.65),
    inset 0 -1px 0 rgba(0,229,255,.55),
    inset 0 0 0 4px rgba(8,12,20,.9),
    inset 0 0 0 5px rgba(255,145,77,.48),
    inset 0 0 0 8px rgba(8,12,20,.55),
    inset 0 0 0 9px rgba(0,229,255,.24),
    0 0 0 2px #080c14,
    0 0 0 3px rgba(0,229,255,.24),
    0 8px 18px rgba(0,0,0,.42);
}
.je-closing-ornament{
  height:clamp(108px,26vw,288px);
  width:min(1120px,calc(100% - 36px));
  transform:none;
  opacity:1;
  border-color:rgba(0,229,255,.65);
  outline:1px solid rgba(255,145,77,.32);
  outline-offset:5px;
}


/* Broader, interlaced rails occupy the existing divider's reserved space. */
.je-section-ornament::before,
.je-section-ornament::after{
  height:34px;
  opacity:1;
  background:
    radial-gradient(circle at right center,var(--je-trim-light) 0 2px,var(--je-trim-cool) 3px 5px,transparent 6px) right center/16px 16px no-repeat,
    linear-gradient(90deg,transparent,var(--je-trim-cool) 32%,var(--je-trim-warm)) center/100% 2px no-repeat,
    linear-gradient(90deg,transparent,rgba(0,229,255,.72),rgba(255,145,77,.55)) center top 7px/88% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,145,77,.65),rgba(0,229,255,.48)) center bottom 7px/88% 1px no-repeat,
    repeating-linear-gradient(45deg,transparent 0 11px,rgba(0,229,255,.45) 12px 13px,transparent 14px 26px) center/86% 20px no-repeat,
    repeating-linear-gradient(-45deg,transparent 0 11px,rgba(255,145,77,.32) 12px 13px,transparent 14px 26px) center/86% 20px no-repeat;
}
.je-section-ornament::after{filter:none}
.je-section-ornament:not(.je-closing-ornament) > span{
  border-color:var(--je-trim-cool);
  background:linear-gradient(135deg,rgba(0,229,255,.18),#0f0f1e 42%,rgba(255,145,77,.18));
  box-shadow:
    inset 0 0 0 4px #0f0f1e,
    inset 0 0 0 5px rgba(255,145,77,.86),
    inset 0 0 0 9px #0f0f1e,
    inset 0 0 0 10px rgba(0,229,255,.42),
    0 1px 0 rgba(237,247,255,.75),
    0 0 0 2px #080c14,
    0 0 0 3px rgba(255,145,77,.5),
    3px 3px 9px rgba(0,0,0,.65),
    0 0 18px rgba(0,229,255,.24);
}
.je-section-ornament:not(.je-closing-ornament) > span::before{
  border-color:rgba(255,145,77,.9);
  box-shadow:0 0 0 3px rgba(0,229,255,.12);
}

/* More detail beneath the tools' existing headers, with no added height. */
.je-tool-crown{
  border-radius:6px;
  box-shadow:
    inset 0 1px 0 rgba(237,247,255,.5),
    inset 0 -1px 0 rgba(255,145,77,.68),
    inset 0 0 0 3px rgba(8,12,20,.8),
    inset 0 0 0 4px rgba(0,229,255,.3),
    0 4px 10px rgba(0,0,0,.4);
  background:
    linear-gradient(90deg,transparent,var(--je-trim-cool),var(--je-trim-light),var(--je-trim-warm),transparent) center/100% 2px no-repeat,
    linear-gradient(90deg,transparent,rgba(0,229,255,.66),transparent 46%,transparent 54%,rgba(255,145,77,.66),transparent) center top 8px/94% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,145,77,.56),transparent 46%,transparent 54%,rgba(0,229,255,.56),transparent) center bottom 8px/94% 1px no-repeat,
    repeating-linear-gradient(45deg,transparent 0 12px,rgba(0,229,255,.35) 13px,transparent 14px 27px) center/84% 22px no-repeat,
    repeating-linear-gradient(-45deg,transparent 0 12px,rgba(255,145,77,.3) 13px,transparent 14px 27px) center/84% 22px no-repeat,
    var(--je-frieze) center/cover no-repeat;
}
.je-tool-crown > .je-crown-center{
  box-shadow:inset 0 0 0 3px #101020,inset 0 0 0 4px var(--je-trim-warm),inset 0 0 0 7px #101020,inset 0 0 0 8px rgba(0,229,255,.6),0 1px 0 var(--je-trim-light),0 0 0 2px #080c14,0 0 0 3px rgba(255,145,77,.5),3px 3px 6px rgba(0,0,0,.7),0 0 14px rgba(0,229,255,.3);
}
.je-tool-crown > .je-crown-center::before,
.je-tool-crown > .je-crown-center::after{
  border-color:var(--je-trim-warm);
  box-shadow:0 0 0 3px #101020,0 0 0 4px rgba(0,229,255,.6);
}

/* Existing corner artwork becomes part of the other main-page hero frames. */
body:not(.home-page):not(.je-rich-page):not(.tool-page) :is(.hero,.guitar-hero)::after{
  inset:18px !important;
  background:
    url('../images/overlay1.png') left top/190px auto no-repeat,
    url('../images/overlay2.png') right bottom/220px auto no-repeat !important;
  opacity:.5 !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* Edge-only geometric inlays: clear centers, fixed size, no new layout space. */
:is(.home-hero,.hero,.guitar-hero)::before{
  border:1px solid rgba(0,229,255,.3) !important;
  box-shadow:inset 0 1px 0 rgba(237,247,255,.48),inset 0 0 0 4px rgba(11,11,18,.65),inset 0 0 0 5px rgba(255,145,77,.55),inset 0 0 0 9px rgba(11,11,18,.4),inset 0 0 0 10px rgba(0,229,255,.28),0 0 0 1px rgba(0,0,0,.65) !important;
  border-image:var(--je-engraving) 48 / 10px / 0 repeat !important;
}
.home-hero .home-title::before,
.hero .title::before,
.guitar-hero .title::before{
  content:"" !important;
  width:34px !important;
  height:34px !important;
  left:calc(50% - 17px) !important;
  transform:none !important;
  background:var(--je-diamond) center/contain no-repeat !important;
}

/* Main-page frames stay within existing card padding. Tool frames below are
   explicitly masked to a two-pixel perimeter, including the compact TAB card. */
body:not(.tool-page) :is(.featured-card,.about-card,.construction-card,.contact-card,.music-card,.video-card,.social-card,.tool-card,.blog-card,.post-card){position:relative}
body:not(.tool-page) :is(.featured-card,.about-card,.construction-card,.contact-card,.music-card,.video-card,.social-card,.tool-card,.blog-card,.post-card)::before,
.tool-page :is(.panel,.card,.group,#options)::before{
  content:"" !important;
  position:absolute !important;
  inset:3px !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:1 !important;
  background:
    linear-gradient(90deg,var(--je-trim-cool),rgba(0,229,255,.2)) left top/92px 3px no-repeat,
    linear-gradient(180deg,var(--je-trim-cool),rgba(0,229,255,.15)) left top/3px 64px no-repeat,
    linear-gradient(270deg,var(--je-trim-warm),rgba(255,145,77,.2)) right top/64px 3px no-repeat,
    linear-gradient(180deg,var(--je-trim-warm),rgba(255,145,77,.15)) right top/3px 44px no-repeat,
    linear-gradient(90deg,var(--je-trim-warm),rgba(255,145,77,.2)) left bottom/64px 3px no-repeat,
    linear-gradient(0deg,var(--je-trim-warm),rgba(255,145,77,.15)) left bottom/3px 44px no-repeat,
    linear-gradient(270deg,var(--je-trim-cool),rgba(0,229,255,.2)) right bottom/92px 3px no-repeat,
    linear-gradient(0deg,var(--je-trim-cool),rgba(0,229,255,.15)) right bottom/3px 64px no-repeat,
    repeating-linear-gradient(90deg,rgba(0,229,255,.8) 0 3px,transparent 3px 9px) center top/46px 3px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,145,77,.8) 0 3px,transparent 3px 9px) center bottom/46px 3px no-repeat !important;
  box-shadow:inset 0 1px 0 rgba(237,247,255,.48),inset 0 0 0 1px rgba(0,229,255,.3),inset 0 0 0 5px rgba(0,0,0,.24),inset 0 0 0 6px rgba(255,145,77,.36),0 0 0 1px rgba(0,0,0,.55) !important;
}

/* Small fittings repeat on the panel edge, away from inputs and diagrams. */
.tool-page :is(.panel,.card,.group,#options)::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle,rgba(237,247,255,.92) 0 1px,var(--je-trim-cool) 1px 2px,transparent 3px) left 1px top 36px/6px 6px no-repeat,
    radial-gradient(circle,rgba(237,247,255,.92) 0 1px,var(--je-trim-warm) 1px 2px,transparent 3px) right 1px bottom 36px/6px 6px no-repeat;
}
.tool-page :is(.panel,.card,.group,#options){
  box-shadow:inset 0 1px 0 rgba(237,247,255,.34),inset 0 -1px 0 rgba(255,145,77,.28),0 0 0 1px rgba(0,229,255,.48),0 0 0 3px #0b0b12,0 0 0 4px rgba(255,145,77,.44),0 12px 28px rgba(0,0,0,.38) !important;
}

/* An engraved strip sits above the main cards' padded content. */
body:not(.tool-page) :is(.featured-card,.about-card,.construction-card,.contact-card,.music-card,.video-card,.social-card,.tool-card,.blog-card,.post-card)::after{
  content:"" !important;
  position:absolute !important;
  top:4px !important;
  left:16px !important;
  right:16px !important;
  bottom:auto !important;
  height:9px !important;
  width:auto !important;
  border:0 !important;
  border-radius:2px !important;
  background:var(--je-engraving) center/220px auto repeat-x !important;
  box-shadow:inset 0 1px 0 rgba(237,247,255,.58),inset 0 -1px 0 rgba(255,145,77,.55),0 0 0 1px rgba(0,229,255,.3),0 2px 4px rgba(0,0,0,.75) !important;
  opacity:.94 !important;
  pointer-events:none !important;
  transform:none !important;
}

/* The solid mask removes the entire center of each tool decoration.
   The two-pixel rim fits even the Tracker's smallest existing padding.
   Never decorate canvas, SVG, fretboard necks, TAB sheets, or input surfaces. */
.tool-page :is(.panel,.card,.group,#options)::before,
.tool-page :is(.panel,.card,.group,#options)::after{
  inset:0 !important;
  padding:2px !important;
  box-sizing:border-box !important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.tool-page :is(.panel,.card,.group,#options)::after{
  background:var(--je-engraving) center/256px auto repeat;
  opacity:.65;
}
@supports not (mask-composite:exclude){
  .tool-page :is(.panel,.card,.group,#options)::before,
  .tool-page :is(.panel,.card,.group,#options)::after{display:none !important}
}

/* Embossed rails beneath the header and above the footer content. */
.site-header::after{
  height:5px !important;
  background:
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(237,247,255,.62) 24px 26px,transparent 27px 50px) center/100% 1px no-repeat,
    linear-gradient(90deg,transparent,var(--je-trim-cool) 25%,rgba(237,247,255,.62),var(--je-trim-warm) 75%,transparent) !important;
}
.site-footer{
  border-top:3px double rgba(255,145,77,.65) !important;
}
.site-footer .footer-inner{
  border-top:7px solid transparent;
  border-image:var(--je-engraving) 48 / 7px 0 0 / 0 repeat;
}

/* Orbiting light is confined to a fixed border. Labels, artwork and hit areas
   never rotate. Separate spans preserve the existing engraved pseudo-elements
   and the original navigation twirl. Slow idle playback is controlled by ornament-motion.js. */
.je-motion-target{
  position:relative;
  isolation:isolate;
  --je-orbit-time:1.6s;
  --je-orbit-direction:normal;
  --je-rim-width:3px;
}
.je-motion-card{
  --je-orbit-time:3.2s;
  --je-rim-width:4px;
}
.je-motion-target:nth-child(even){--je-orbit-direction:reverse}
a.je-motion-button{
  box-shadow:
    inset 0 1px 0 rgba(237,247,255,.65),
    inset 0 -2px 0 rgba(0,0,0,.32),
    0 0 0 1px rgba(8,12,20,.9),
    0 0 0 2px rgba(255,145,77,.32),
    0 5px 12px rgba(0,0,0,.35);
}
:is(.home-page,.je-rich-page) .btn-group > .je-motion-target{
  --je-rim-width:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 0 rgba(0,0,0,.4),
    inset 0 0 0 3px rgba(8,12,20,.22),
    0 0 0 1px #080c14,
    0 0 0 2px rgba(0,229,255,.5),
    0 4px 0 rgba(8,12,20,.7),
    0 9px 20px rgba(0,0,0,.36);
}
.je-motion-target > .je-hover-rim{
  display:none;
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  box-sizing:border-box;
  margin:0 !important;
  padding:var(--je-rim-width);
  border:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  contain:paint;
}
.je-motion-target > .je-hover-rim > .je-hover-orbit{
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  width:220%;
  aspect-ratio:1;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(8,12,20,.85) 0deg 36deg,
    rgba(0,229,255,.3) 58deg,
    var(--je-trim-cool) 82deg,
    var(--je-trim-light) 94deg 101deg,
    var(--je-trim-cool) 111deg,
    rgba(8,12,20,.85) 146deg 216deg,
    rgba(255,145,77,.35) 238deg,
    var(--je-trim-warm) 262deg,
    #fff1d8 274deg 281deg,
    var(--je-trim-warm) 291deg,
    rgba(8,12,20,.85) 326deg 360deg);
  transform:translate(-50%,-50%) rotate(0turn);
  animation:none;
}
/* Fallback browsers keep the bevel and a normal focus/hover outline. */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .je-motion-target > .je-hover-rim{
    display:block;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
  }
}
.je-motion-target:focus-visible{
  outline:2px solid var(--je-trim-light);
  outline-offset:4px;
}
.je-motion-target:focus-visible > .je-hover-rim,
.je-motion-target:active > .je-hover-rim{opacity:1}
@media (hover:hover) and (pointer:fine){
  .je-motion-target:hover:not(:focus-visible){
    outline:1px solid rgba(0,229,255,.65);
    outline-offset:2px;
  }
  .je-motion-target:hover > .je-hover-rim{opacity:1}
}
.je-motion-target > .je-hover-rim > .je-hover-orbit{
  animation:je-border-orbit calc(var(--je-orbit-time) / var(--je-motion-css-speed,.12)) linear infinite var(--je-orbit-direction) !important;
}
@keyframes je-border-orbit{
  from{transform:translate(-50%,-50%) rotate(0turn)}
  to{transform:translate(-50%,-50%) rotate(1turn)}
}

/* Visible geometry makes the motion clear even without CSS mask support.
   User-requested motion stays enabled independently of OS motion preferences.
   Ornaments drift at rest and accelerate on hover/focus; hidden areas pause. */
.je-motion-target > .je-motion-jewel{
  display:inline-block;
  position:relative !important;
  width:24px;
  height:24px;
  margin:0 0 0 12px;
  padding:0;
  border:0;
  vertical-align:middle;
  flex-shrink:0;
  background:var(--je-diamond) center/contain no-repeat;
  pointer-events:none;
  transform-origin:center;
}
.je-motion-card > .je-motion-jewel{
  display:block !important;
  width:36px;
  height:36px;
  margin:14px 0 2px auto !important;
}
.je-motion-jewel::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid rgba(0,229,255,.9);
  border-top-color:#fff3d9;
  border-bottom-color:var(--je-trim-warm);
  border-radius:30%;
  pointer-events:none;
}
.je-motion-jewel::before{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px dashed var(--je-trim-warm);
  border-left-color:var(--je-trim-light);
  border-right-color:var(--je-trim-cool);
  border-radius:50%;
  pointer-events:none;
}
.je-motion-target:is(:hover,:focus-visible) > .je-hover-rim{opacity:1}
.je-motion-target > .je-motion-jewel{
  animation:je-jewel-turn calc(1.2s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.je-motion-target > .je-motion-jewel::after{
  animation:je-jewel-turn calc(2s / var(--je-motion-css-speed,.12)) linear infinite reverse !important;
}
.je-motion-target > .je-motion-jewel::before{
  animation:je-jewel-turn calc(3s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.je-motion-target:nth-child(3n+2) > .je-motion-jewel{
  animation:je-jewel-turn calc(1.8s / var(--je-motion-css-speed,.12)) ease-in-out infinite reverse !important;
}
.je-motion-target:nth-child(3n) > .je-motion-jewel{
  animation:je-jewel-flip calc(2.4s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.je-motion-card > .je-motion-jewel{
  animation-duration:calc(2.6s / var(--je-motion-css-speed,.12)) !important;
}
/* The top-center mark is a nested, faceted diamond, centered before rotating. */
:is(.home-hero,.hero,.guitar-hero) :is(.home-title,.title)::before{
  animation:je-title-turn calc(3s / var(--je-motion-css-speed,.12)) ease-in-out infinite !important;
}
@keyframes je-title-turn{
  from{rotate:0deg}
  to{rotate:360deg}
}
@keyframes je-jewel-turn{
  from{transform:rotate(0turn)}
  to{transform:rotate(1turn)}
}
@keyframes je-jewel-flip{
  0%{transform:perspective(160px) rotateY(0turn) rotate(0deg)}
  50%{transform:perspective(160px) rotateY(.5turn) rotate(25deg)}
  100%{transform:perspective(160px) rotateY(1turn) rotate(0deg)}
}
/* Reserved divider spaces can move freely without intersecting any control. */
.je-section-ornament,.je-tool-crown{pointer-events:auto}
.je-section-ornament:not(.je-closing-ornament) > span,
.je-tool-crown > .je-crown-center{
  animation:je-trim-turn calc(4s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.tool-page .je-tool-crown > .je-crown-center{
  animation:je-trim-turn calc(4s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.tool-page .je-tool-crown > .je-crown-center::before{
  animation:je-jewel-turn calc(2s / var(--je-motion-css-speed,.12)) linear infinite reverse !important;
}
.tool-page .je-tool-crown > .je-crown-center::after{
  animation:je-jewel-turn calc(3s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.je-section-ornament:not(.je-closing-ornament) > span::before,
.je-tool-crown > .je-crown-center::before{
  animation:je-jewel-turn calc(5s / var(--je-motion-css-speed,.12)) linear infinite reverse !important;
}
.je-tool-crown > .je-crown-center::after{
  animation:je-jewel-turn calc(3s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
@keyframes je-trim-turn{
  from{transform:rotate(45deg)}
  to{transform:rotate(405deg)}
}
@media(max-width:760px){
  .je-section-ornament::before,.je-section-ornament::after{height:24px}
  body:not(.home-page):not(.je-rich-page):not(.tool-page) :is(.hero,.guitar-hero)::after{
    inset:12px !important;
    background-size:90px auto,110px auto !important;
    opacity:.22 !important;
  }
  .home-hero .home-title::before,.hero .title::before,.guitar-hero .title::before{height:26px !important;width:26px !important;left:calc(50% - 13px) !important}
}

/* Finale v2026.09.06.2: a paired, reversible instrument in the original artwork.
   Each medallion is positioned explicitly; no inherited divider grid columns. */
button.je-closing-ornament{
  position:relative;
  display:block;
  grid-template-columns:none;
  padding:0;
  appearance:none;
  isolation:isolate;
  cursor:pointer;
  touch-action:manipulation;
  --je-finale-forward:normal;
  --je-finale-counter:reverse;
}
button.je-closing-ornament:is(:hover,:focus-visible){
  border-color:#f3fdff;
  box-shadow:inset 0 0 0 2px rgba(237,247,255,.6),inset 0 0 0 5px #080c14,inset 0 0 0 6px #ff914d,inset 0 0 28px rgba(0,229,255,.2),0 0 0 2px #080c14,0 0 0 3px #00e5ff,0 0 20px rgba(0,229,255,.4),0 0 42px rgba(255,145,77,.25),0 12px 24px rgba(0,0,0,.5);
}
button.je-closing-ornament:focus-visible{outline:2px solid #fff1d8;outline-offset:7px}
button.je-closing-ornament[data-finale-fallback][aria-pressed="true"]{
  --je-finale-forward:reverse;
  --je-finale-counter:normal;
}
button.je-closing-ornament::before,
button.je-closing-ornament::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  pointer-events:none;
  border:0;
  z-index:0;
  opacity:0;
  filter:none;
  transition:opacity .25s ease;
}
button.je-closing-ornament::before{
  background:radial-gradient(ellipse at 23.5% 50%,rgba(0,229,255,.28),transparent 28%),radial-gradient(ellipse at 76.5% 50%,rgba(255,145,77,.28),transparent 28%),linear-gradient(0deg,rgba(0,229,255,.08),transparent 45%,rgba(255,229,188,.09));
  transform:none;
}
button.je-closing-ornament::after{
  background:linear-gradient(108deg,transparent 33%,rgba(223,253,255,.03) 43%,rgba(255,241,216,.22) 50%,rgba(0,229,255,.05) 57%,transparent 67%);
  animation:je-finale-sheen calc(7s / var(--je-motion-css-speed,.12)) ease-in-out infinite var(--je-finale-forward) !important;
}
button.je-closing-ornament:is(:hover,:focus-visible)::before,
button.je-closing-ornament:is(:hover,:focus-visible)::after{opacity:1}

button.je-closing-ornament span{
  display:block;
  position:absolute;
  box-sizing:border-box;
  margin:0;
  padding:0;
  pointer-events:none;
  border:0;
  background:none;
  box-shadow:none;
}
button.je-closing-ornament .je-finale-medallion{
  top:50%;
  width:clamp(40px,8vw,88px);
  aspect-ratio:1;
  z-index:2;
}
button.je-closing-ornament .je-finale-left{left:23.5%;transform:translate(-50%,-50%)}
button.je-closing-ornament .je-finale-right{right:23.5%;transform:translate(50%,-50%)}
button.je-closing-ornament .je-finale-diamond{
  inset:0;
  background:var(--je-diamond) center/contain no-repeat;
  animation:je-finale-turn calc(4.5s / var(--je-motion-css-speed,.12)) linear infinite var(--je-finale-forward) !important;
}
button.je-closing-ornament .je-finale-right .je-finale-diamond{
  scale:-1 1;
  animation-direction:var(--je-finale-counter) !important;
}
button.je-closing-ornament .je-finale-ring{
  inset:2%;
  border:2px dashed var(--je-trim-cool);
  border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(8,12,20,.7),0 0 0 1px rgba(8,12,20,.8),0 0 9px rgba(0,229,255,.28);
  animation:je-finale-turn calc(6s / var(--je-motion-css-speed,.12)) linear infinite var(--je-finale-counter) !important;
}
button.je-closing-ornament .je-finale-ring-inner{
  inset:14%;
  border:3px double var(--je-trim-warm);
  border-radius:24%;
  animation-duration:calc(2.8s / var(--je-motion-css-speed,.12)) !important;
  animation-direction:var(--je-finale-forward) !important;
}
button.je-closing-ornament .je-finale-right .je-finale-ring-outer{animation-direction:var(--je-finale-forward) !important}
button.je-closing-ornament .je-finale-right .je-finale-ring-inner{animation-direction:var(--je-finale-counter) !important}
.je-finale-ring::before,.je-finale-ring::after{
  content:"";
  position:absolute;
  left:calc(50% - 3px);
  top:-4px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f3fdff;
  box-shadow:0 0 7px #00e5ff;
}
.je-finale-ring::after{top:auto;bottom:-4px;background:#fff1d8;box-shadow:0 0 7px #ff914d}
button.je-closing-ornament .je-finale-frame{
  inset:0;
  padding:4px;
  border-radius:inherit;
  z-index:3;
  overflow:hidden;
  opacity:.65;
  transition:opacity .2s ease;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
button.je-closing-ornament:is(:hover,:focus-visible) .je-finale-frame{opacity:1}
button.je-closing-ornament .je-finale-spectrum{
  top:50%;
  left:50%;
  width:112%;
  aspect-ratio:1;
  background:var(--je-bright-spectrum);
  animation:je-finale-border calc(3s / var(--je-motion-css-speed,.12)) linear infinite var(--je-finale-forward) !important;
}
button.je-closing-ornament .je-finale-corner{
  width:26px;
  height:26px;
  z-index:4;
  border-top:2px solid #fff1d8;
  border-left:2px solid #00e5ff;
  border-radius:5px 0 0 0;
  background:radial-gradient(circle at 6px 6px,#f3fdff 0 1px,#ff914d 2px 3px,transparent 4px),linear-gradient(90deg,#ff914d,transparent) left 4px top 4px/17px 1px no-repeat,linear-gradient(#00e5ff,transparent) left 4px top 4px/1px 17px no-repeat;
}
.je-closing-ornament .je-finale-corner-tl{top:9px;left:9px}
.je-closing-ornament .je-finale-corner-tr{top:9px;right:9px;transform:rotate(90deg)}
.je-closing-ornament .je-finale-corner-br{bottom:9px;right:9px;transform:rotate(180deg)}
.je-closing-ornament .je-finale-corner-bl{bottom:9px;left:9px;transform:rotate(270deg)}
@keyframes je-finale-turn{from{transform:rotate(0turn)}to{transform:rotate(1turn)}}
@keyframes je-finale-border{from{transform:translate(-50%,-50%) rotate(0turn)}to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes je-finale-sheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}

/* Additional fittings around the original menu twirl: its ::after and its
   three-second spin remain untouched. New light travels around a fixed edge. */
.site-nav a .je-nav-accents{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.site-nav a:is(:hover,:focus-visible) .je-nav-accents{opacity:1}
.site-nav a:is(:hover,:focus-visible){
  border-color:rgba(237,247,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,241,216,.6),inset 0 -1px 0 rgba(0,229,255,.5),0 0 0 1px rgba(0,229,255,.35),0 0 16px rgba(0,229,255,.25),0 0 25px rgba(255,145,77,.18);
}
.site-nav a .je-nav-frame{
  position:absolute;
  inset:0;
  padding:2px;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.site-nav a .je-nav-spectrum{
  position:absolute;
  top:50%;
  left:50%;
  width:220%;
  aspect-ratio:1;
  background:var(--je-bright-spectrum);
  transform:translate(-50%,-50%);
}
.site-nav a .je-nav-gem{
  position:absolute;
  width:8px;
  height:8px;
  background:var(--je-diamond) center/contain no-repeat;
  border:1px solid #ff914d;
  box-shadow:0 0 5px rgba(0,229,255,.7);
}
.site-nav a .je-nav-gem-left{left:0;top:0}
.site-nav a .je-nav-gem-right{right:0;bottom:0;border-color:#00e5ff}
.site-nav a .je-nav-spectrum{animation:je-border-orbit calc(2.2s / var(--je-motion-css-speed,.12)) linear infinite reverse !important}
.site-nav a .je-nav-gem-left{animation:je-jewel-turn calc(2s / var(--je-motion-css-speed,.12)) linear infinite !important}
.site-nav a .je-nav-gem-right{animation:je-jewel-turn calc(3s / var(--je-motion-css-speed,.12)) linear infinite reverse !important}

/* Carry the new beaded-metal finish into the existing ornaments and tools. */
.je-motion-target:is(:hover,:focus-visible) > .je-motion-jewel{
  filter:drop-shadow(0 0 4px rgba(0,229,255,.65)) drop-shadow(0 0 5px rgba(255,145,77,.4));
}
.je-motion-jewel::before{box-shadow:0 0 0 2px rgba(8,12,20,.7),inset 0 0 0 1px rgba(237,247,255,.45)}
.je-section-ornament:not(.je-closing-ornament)::before,
.je-section-ornament:not(.je-closing-ornament)::after{box-shadow:0 1px 0 rgba(237,247,255,.25),0 -1px 0 rgba(255,145,77,.35)}
.je-tool-crown::before,.je-tool-crown::after{
  content:"";
  position:absolute;
  top:calc(50% - 7px);
  width:14px;
  height:14px;
  background:var(--je-diamond) center/contain no-repeat;
  border:1px dotted #fff1d8;
  border-radius:50%;
  pointer-events:none;
}
.je-tool-crown::before{left:18px}
.je-tool-crown::after{right:18px}
.je-tool-crown::before,
.tool-page .je-tool-crown::before{animation:je-jewel-turn calc(3s / var(--je-motion-css-speed,.12)) linear infinite !important}
.je-tool-crown::after,
.tool-page .je-tool-crown::after{animation:je-jewel-turn calc(4s / var(--je-motion-css-speed,.12)) linear infinite reverse !important}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  button.je-closing-ornament .je-finale-frame,.site-nav a .je-nav-frame{display:none}
}

/* Homepage showpiece v2026.09.06.3. The complete illustrated frame surrounds
   a reserved central content zone; the heading and four actions stay compact. */
:is(.home-page,.je-rich-page) .home-hero{
  width:min(1440px,calc(100% - 28px));
  margin:14px auto 20px;
  padding:clamp(56px,8vh,72px) clamp(38px,14vw,194px) 48px;
  border:1px solid rgba(255,213,168,.7);
  border-radius:18px;
  background:var(--je-hero-art) center/100% 100% no-repeat #080c14;
  box-shadow:0 0 0 2px #080c14,0 0 0 3px rgba(0,229,255,.4),0 0 0 6px #080c14,0 0 0 7px rgba(255,145,77,.35),0 16px 38px rgba(0,0,0,.42),0 0 36px rgba(0,229,255,.09);
}
:is(.home-page,.je-rich-page) .home-hero::before{
  inset:0 !important;
  border:0 !important;
  border-image:none !important;
  border-radius:inherit !important;
  opacity:1 !important;
  background:radial-gradient(ellipse at 5.4% 50%,rgba(0,229,255,.14),transparent 16%),radial-gradient(ellipse at 94.6% 50%,rgba(255,145,77,.14),transparent 16%) !important;
  box-shadow:inset 0 1px 0 rgba(255,241,216,.5),inset 0 0 0 4px rgba(0,229,255,.12),inset 0 0 0 7px rgba(255,145,77,.14) !important;
}
:is(.home-page,.je-rich-page) .home-hero::after{
  inset:0 !important;
  background:radial-gradient(ellipse at 5.4% 50%,rgba(0,229,255,.25),transparent 23%),radial-gradient(ellipse at 94.6% 50%,rgba(255,145,77,.25),transparent 23%),radial-gradient(ellipse at 50% 0,rgba(255,241,216,.13),transparent 30%) !important;
  opacity:0 !important;
  transition:opacity .3s ease;
}
:is(.home-page,.je-rich-page) .home-hero:is(:hover,:focus-within)::after{opacity:1 !important}
:is(.home-page,.je-rich-page) .home-hero > .je-hero-copy{width:100%;max-width:1040px;min-width:0}
:is(.home-page,.je-rich-page) .home-title{
  background:linear-gradient(115deg,#e8fdff 0%,#00e5ff 27%,#8cecf2 43%,#ff914d 67%,#fff1d8 94%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 2px 1px #000) drop-shadow(0 0 14px rgba(0,229,255,.22)) !important;
}
:is(.home-page,.je-rich-page) .home-hero .home-title::before{
  display:block !important;
  width:42px !important;
  height:42px !important;
  left:calc(50% - 21px) !important;
  top:-47px !important;
}
:is(.home-page,.je-rich-page) .home-title::after{
  height:4px !important;
  background:linear-gradient(90deg,transparent,#00e5ff 20%,#f3fdff 40%,#ff914d 70%,transparent) !important;
  box-shadow:0 2px 0 #080c14,0 3px 0 rgba(255,145,77,.45),0 0 12px rgba(0,229,255,.3) !important;
}
:is(.home-page,.je-rich-page) .home-subtitle{color:#d7e0ef;max-width:45rem;text-shadow:0 2px 3px #000}
:is(.home-page,.je-rich-page) .btn-group > .btn{
  position:relative;
  border-color:rgba(255,241,216,.8);
  background:linear-gradient(135deg,#80f5ff 0%,#16dceb 27%,#d3cfab 53%,#ffaf78 74%,#ff914d 100%);
}
:is(.home-page,.je-rich-page) .btn-group > .btn::before,
:is(.home-page,.je-rich-page) .btn-group > .btn::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  height:2px;
  border-radius:3px;
  pointer-events:none;
}
:is(.home-page,.je-rich-page) .btn-group > .btn::before{top:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
:is(.home-page,.je-rich-page) .btn-group > .btn::after{bottom:4px;background:repeating-linear-gradient(90deg,rgba(8,12,20,.45) 0 3px,transparent 3px 8px)}
:is(.home-page,.je-rich-page) .home-hero > :is(.je-hero-aureole,.je-hero-medallion,.je-hero-pearl){position:absolute !important;pointer-events:none;z-index:2}
:is(.home-page,.je-rich-page) .je-hero-aureole{
  inset:0;
  padding:4px;
  border-radius:inherit;
  overflow:hidden;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.7;
}
:is(.home-page,.je-rich-page) .home-hero:is(:hover,:focus-within) .je-hero-aureole{opacity:1}
:is(.home-page,.je-rich-page) .je-hero-spectrum{
  position:absolute;
  top:50%;
  left:50%;
  width:120%;
  aspect-ratio:1;
  background:var(--je-bright-spectrum);
  animation:je-border-orbit calc(4s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
:is(.home-page,.je-rich-page) .je-hero-medallion{
  width:clamp(34px,6vw,78px);
  aspect-ratio:1;
  top:50%;
}
:is(.home-page,.je-rich-page) .je-hero-medallion-left{left:5.4%;translate:-50% -50%}
:is(.home-page,.je-rich-page) .je-hero-medallion-right{right:5.4%;translate:50% -50%}
:is(.home-page,.je-rich-page) .je-hero-medallion > span{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}
:is(.home-page,.je-rich-page) .je-hero-gem{
  background:var(--je-diamond) center/contain no-repeat;
  animation:je-jewel-turn calc(5s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
:is(.home-page,.je-rich-page) .je-hero-medallion-right .je-hero-gem{animation-direction:reverse !important}
:is(.home-page,.je-rich-page) .je-hero-orbit{
  border:2px dashed #a3f7ff;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(8,12,20,.6),0 0 8px rgba(0,229,255,.6);
  animation:je-jewel-turn calc(7s / var(--je-motion-css-speed,.12)) linear infinite reverse !important;
}
:is(.home-page,.je-rich-page) .je-hero-medallion > .je-hero-orbit-inner{
  inset:15%;
  border:3px double #ffb27b;
  border-radius:22%;
  animation-duration:calc(3.5s / var(--je-motion-css-speed,.12)) !important;
  animation-direction:normal !important;
}
:is(.home-page,.je-rich-page) .je-hero-medallion-right .je-hero-orbit{animation-direction:normal !important}
:is(.home-page,.je-rich-page) .je-hero-medallion-right .je-hero-orbit-inner{animation-direction:reverse !important}
:is(.home-page,.je-rich-page) .je-hero-orbit::before,:is(.home-page,.je-rich-page) .je-hero-orbit::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  top:-3px;
  left:calc(50% - 2.5px);
  background:#fff1d8;
  border-radius:50%;
  box-shadow:0 0 6px #ff914d;
}
:is(.home-page,.je-rich-page) .je-hero-orbit::after{top:auto;bottom:-3px;background:#e8fdff;box-shadow:0 0 6px #00e5ff}
:is(.home-page,.je-rich-page) .je-hero-pearl{
  width:clamp(26px,4.5vw,58px);
  aspect-ratio:1;
  border:1px dotted #fff1d8;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(8,12,20,.36),0 0 0 4px rgba(0,229,255,.38);
  animation:je-jewel-turn calc(9s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
:is(.home-page,.je-rich-page) .je-hero-pearl::before,:is(.home-page,.je-rich-page) .je-hero-pearl::after{
  content:"";
  position:absolute;
  top:-3px;
  left:calc(50% - 2px);
  width:4px;
  height:4px;
  background:#fff1d8;
  box-shadow:0 0 6px #00e5ff;
  border-radius:50%;
}
:is(.home-page,.je-rich-page) .je-hero-pearl::after{top:auto;bottom:-3px;background:#ff914d}
:is(.home-page,.je-rich-page) .je-hero-pearl-tl{left:6.3%;top:11.5%;translate:-50% -50%}
:is(.home-page,.je-rich-page) .je-hero-pearl-tr{right:6.3%;top:11.5%;translate:50% -50%;animation-direction:reverse !important}
:is(.home-page,.je-rich-page) .je-hero-pearl-bl{left:6.3%;bottom:13%;translate:-50% 50%;animation-direction:reverse !important}
:is(.home-page,.je-rich-page) .je-hero-pearl-br{right:6.3%;bottom:13%;translate:50% 50%}

/* One final flourish for the lower panel: a fine moving halo around the
   artwork's own central jewel, leaving the engraved centerpiece visible. */
button.je-closing-ornament .je-finale-heart{
  left:50%;
  top:50%;
  width:clamp(30px,5.4vw,66px);
  aspect-ratio:1;
  translate:-50% -50%;
  z-index:2;
}
button.je-closing-ornament .je-finale-heart-ring{
  inset:0;
  border:1px dotted #fff1d8;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,229,255,.14);
  animation:je-finale-turn calc(9s / var(--je-motion-css-speed,.12)) linear infinite var(--je-finale-forward) !important;
}
button.je-closing-ornament .je-finale-heart-ring-inner{
  inset:12%;
  border:1px solid rgba(0,229,255,.8);
  border-radius:25%;
  animation-direction:var(--je-finale-counter) !important;
  animation-duration:calc(6s / var(--je-motion-css-speed,.12)) !important;
}
.je-finale-heart-ring::before,.je-finale-heart-ring::after{
  content:"";
  position:absolute;
  top:-3px;
  left:calc(50% - 2px);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff1d8;
  box-shadow:0 0 5px #ff914d;
}
.je-finale-heart-ring::after{top:auto;bottom:-3px;background:#d8fbff;box-shadow:0 0 5px #00e5ff}

/* A shared finishing lift: crisper metal, brighter headings, deeper settings. */
body:not(.tool-page) :is(.featured-section,.collection-picks) > h2,
body:not(.tool-page) :is(.tool-title,.media-caption h2,.social-card-copy h2,.footer-col h3){
  color:#e9f5fa;
  text-shadow:0 1px 0 #080c14,0 0 14px rgba(0,229,255,.18);
}
body:not(.tool-page) :is(.featured-card,.tool-card,.social-card,.music-card,.video-card,.about-card,.construction-card,.contact-card,.post-card){
  border-color:rgba(255,171,112,.3);
  box-shadow:inset 0 1px 0 rgba(237,247,255,.17),inset 0 -1px 0 rgba(255,145,77,.16),0 0 0 1px rgba(0,229,255,.08),0 10px 24px rgba(0,0,0,.3);
}
body:not(.tool-page) .je-motion-card:is(:hover,:focus-visible){
  border-color:rgba(237,247,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,241,216,.4),0 0 0 1px rgba(0,229,255,.35),0 12px 28px rgba(0,0,0,.4),0 0 22px rgba(0,229,255,.13);
}
body:not(.home-page):not(.je-rich-page):not(.tool-page) :is(.hero,.guitar-hero)::before{opacity:1 !important}
.site-header{border-bottom-color:rgba(0,229,255,.4)}
.site-footer .footer-inner{box-shadow:0 -1px 0 rgba(237,247,255,.25)}
.tool-page .je-tool-crown{box-shadow:inset 0 1px 0 rgba(237,247,255,.65),inset 0 -1px 0 rgba(255,145,77,.8),inset 0 0 0 3px rgba(8,12,20,.8),inset 0 0 0 4px rgba(0,229,255,.46),0 5px 12px rgba(0,0,0,.4)}

@media(max-width:760px){
  :is(.home-page,.je-rich-page) .home-hero{
    width:calc(100% - 20px);
    margin-top:10px;
    padding:54px 38px 48px;
    border-radius:12px;
    background:#080c14;
  }
  :is(.home-page,.je-rich-page) .home-hero::before{
    background:none !important;
    border:solid transparent !important;
    border-width:44px 32px !important;
    border-image:var(--je-hero-art) 95 250 fill / 44px 32px / 0 stretch !important;
  }
  :is(.home-page,.je-rich-page) .home-title{font-size:clamp(22px,5.3vw,38px)}
  :is(.home-page,.je-rich-page) .home-hero .home-title::before{width:30px !important;height:30px !important;left:calc(50% - 15px) !important;top:-36px !important}
  :is(.home-page,.je-rich-page) .home-subtitle{font-size:1rem}
  :is(.home-page,.je-rich-page) .btn-group > .btn{font-size:1.05rem;padding:10px 9px}
  :is(.home-page,.je-rich-page) .btn-group .je-motion-jewel{width:18px;height:18px;margin-left:9px}
  :is(.home-page,.je-rich-page) .je-hero-medallion{width:28px}
  :is(.home-page,.je-rich-page) .je-hero-medallion-left{left:17px}
  :is(.home-page,.je-rich-page) .je-hero-medallion-right{right:17px}
  :is(.home-page,.je-rich-page) .je-hero-pearl{width:22px}
  :is(.home-page,.je-rich-page) .je-hero-pearl-tl{left:17px;top:24px}
  :is(.home-page,.je-rich-page) .je-hero-pearl-tr{right:17px;top:24px}
  :is(.home-page,.je-rich-page) .je-hero-pearl-bl{left:17px;bottom:24px}
  :is(.home-page,.je-rich-page) .je-hero-pearl-br{right:17px;bottom:24px}
  :is(.home-page,.je-rich-page) .je-hero-spectrum{width:260%}
}
@media(max-height:660px) and (min-width:761px){
  :is(.home-page,.je-rich-page) .home-hero{padding-top:52px;padding-bottom:38px;margin-top:10px}
  :is(.home-page,.je-rich-page) .home-subtitle{margin-top:12px;margin-bottom:16px}
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  :is(.home-page,.je-rich-page) .je-hero-aureole{display:none}
}

/* Three nested borders for the upper-left image: a moving spectrum between
   a cool inner rim and a copper outer rim. The image itself remains still. */
.brand .je-brand-picture{position:relative;display:inline-grid;border-radius:14px;isolation:isolate}
.brand .je-brand-picture.is-unavailable{display:none}
.brand .je-brand-picture::before,.brand .je-brand-picture::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(0,229,255,.85);
  border-radius:19px;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(237,247,255,.5),0 0 0 2px #080c14;
}
.brand .je-brand-picture::after{
  inset:-10px;
  border-color:rgba(255,177,121,.82);
  border-radius:23px;
  box-shadow:0 0 0 1px rgba(8,12,20,.9),0 0 12px rgba(255,145,77,.2);
}
.brand .je-brand-color-rim{
  position:absolute;
  inset:-2px;
  padding:3px;
  border-radius:16px;
  overflow:hidden;
  z-index:2;
  pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.brand .je-brand-spectrum{
  position:absolute;
  left:50%;
  top:50%;
  width:120%;
  aspect-ratio:1;
  background:var(--je-bright-spectrum);
  transform:translate(-50%,-50%);
}
.brand .je-brand-spectrum{animation:je-border-orbit calc(2.6s / var(--je-motion-css-speed,.12)) linear infinite !important}
.brand:is(:hover,:focus-visible) .je-brand-picture::after{box-shadow:0 0 0 1px #080c14,0 0 12px rgba(0,229,255,.4),0 0 22px rgba(255,145,77,.35)}
:is(.home-page,.je-rich-page) .je-hero-pearl{box-shadow:0 0 0 2px #080c14,0 0 0 3px #00e5ff,0 0 0 5px #080c14,0 0 0 6px #ffae76,0 0 12px rgba(0,229,255,.4)}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .brand .je-brand-color-rim{display:none}
}
:is(.home-page,.je-rich-page) .je-hero-pearl-frame{
  position:absolute;
  inset:-1px;
  padding:3px;
  border-radius:50%;
  overflow:hidden;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
:is(.home-page,.je-rich-page) .je-hero-pearl-spectrum{
  position:absolute;
  top:50%;
  left:50%;
  width:160%;
  aspect-ratio:1;
  background:var(--je-bright-spectrum);
  animation:je-border-orbit calc(4.5s / var(--je-motion-css-speed,.12)) linear infinite reverse !important;
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  :is(.home-page,.je-rich-page) .je-hero-pearl-frame{display:none}
}

/* Idle/ramp model v2026.09.06.5. CSS-only fallback uses the same 12% idle
   speed; the engine keeps durations fixed and eases playback rates instead. */
html.je-motion-engine{--je-motion-css-speed:1}
:is(.home-hero,.hero,.guitar-hero,.je-motion-target,.je-section-ornament,.je-tool-crown,.site-nav a,.brand):is(:hover,:focus-within){--je-motion-css-speed:1}
.je-motion-target > .je-hover-rim{opacity:.58}
.site-nav a .je-nav-accents{opacity:.58}
button.je-closing-ornament::after{opacity:.28}
button.je-closing-ornament:is(:hover,:focus-visible)::after{opacity:1}

/* The illustrated homepage frame now belongs to the whole collection. The
   other banners keep a shorter title space; the homepage remains unchanged. */
.je-rich-page .home-hero{
  min-height:252px;
  padding-top:68px;
  padding-bottom:44px;
}
.je-rich-page .home-hero .home-title{font-size:clamp(32px,4.6vw,58px);line-height:1.15;margin:0}
.je-rich-page .home-hero .home-subtitle{margin:18px auto 0;max-width:43rem}

/* Each collection card gets its own miniature engraved crest. It occupies a
   real row above the content, so no jewel crosses a label, player or image. */
.je-rich-page :is(.je-motion-card,.post-preview,.blog-sidebar){
  position:relative;
  isolation:isolate;
  border-color:rgba(255,185,130,.66) !important;
  box-shadow:inset 0 1px 0 rgba(243,253,255,.7),0 0 0 2px #080c14,0 0 0 3px rgba(0,229,255,.4),0 0 0 5px #080c14,0 0 0 6px rgba(255,145,77,.26),0 16px 32px rgba(0,0,0,.46) !important;
}
.je-rich-page :is(.je-motion-card,.post-preview,.blog-sidebar)::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border:10px solid transparent !important;
  border-radius:inherit !important;
  border-image:var(--je-hero-art) 95 250 / 10px 12px / 0 stretch !important;
  background:none !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.je-rich-page :is(.je-motion-card,.post-preview,.blog-sidebar)::after{
  content:"" !important;
  position:absolute !important;
  top:3px !important;
  left:14px !important;
  right:14px !important;
  bottom:auto !important;
  width:auto !important;
  height:4px !important;
  background:repeating-linear-gradient(90deg,#fff1d8 0 1px,transparent 1px 9px) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:0 1px 0 rgba(0,229,255,.55),0 2px 0 #080c14 !important;
  pointer-events:none !important;
}
.je-rich-page .je-motion-card:is(:hover,:focus-within){
  box-shadow:inset 0 1px 0 #fff1d8,0 0 0 2px #080c14,0 0 0 3px #00e5ff,0 0 0 5px #080c14,0 0 0 6px rgba(255,145,77,.76),0 18px 34px rgba(0,0,0,.5),0 0 22px rgba(0,229,255,.15) !important;
}
.je-rich-page .je-motion-card > .je-card-crest{
  position:relative !important;
  display:block;
  grid-column:1 / -1;
  flex:none;
  width:min(100%,340px);
  height:44px;
  margin:0 auto 16px;
  border:1px solid rgba(255,181,126,.65);
  border-radius:7px;
  background:var(--je-frieze) center/100% 100% no-repeat #080c14;
  box-shadow:inset 0 0 0 2px #080c14,inset 0 0 0 3px rgba(0,229,255,.38),0 0 0 2px #080c14,0 0 0 3px rgba(0,229,255,.27),0 5px 10px rgba(0,0,0,.5);
  pointer-events:none;
}
.je-rich-page .je-motion-card > .je-card-crest::before,
.je-rich-page .je-motion-card > .je-card-crest::after{
  content:"";
  position:absolute;
  top:50%;
  width:22px !important;
  height:22px !important;
  margin:-11px 0 0 !important;
  background:none !important;
  opacity:1 !important;
  border:1px dashed #a3f7ff;
  border-radius:50%;
  box-shadow:0 0 0 2px #080c14,0 0 0 3px rgba(255,145,77,.7);
  animation:je-jewel-turn calc(6s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.je-card-crest::before{left:calc(23.5% - 11px)}
.je-card-crest::after{right:calc(23.5% - 11px);animation-direction:reverse !important}
.je-card-crest > .je-card-crest-gem{
  position:absolute;
  width:28px;
  height:28px;
  top:calc(50% - 14px);
  left:calc(50% - 14px);
  background:var(--je-diamond) center/contain no-repeat;
  animation:je-jewel-flip calc(5s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.je-rich-page .post-card > .je-card-crest{height:82px;width:min(100%,660px);margin:0 auto 28px}
.je-rich-page .post-card > .je-card-crest::before,.je-rich-page .post-card > .je-card-crest::after{scale:1.5}
.je-rich-page .post-card > .je-card-crest .je-card-crest-gem{scale:1.5}
.je-rich-page .social-card > .je-card-crest{width:calc(100% - 32px);margin:14px auto}
.je-rich-page .social-card::before{z-index:2 !important}
@media(min-width:861px){.je-rich-page .blog-sidebar{position:sticky}}
.je-rich-page :is(.collection-picks > h2,.blog-section-title){
  padding-bottom:14px;
  border-bottom:3px double rgba(255,145,77,.58);
  background:var(--je-engraving) left bottom/220px 5px repeat-x;
  text-shadow:0 2px 0 #000,0 0 14px rgba(0,229,255,.22);
}
.je-rich-page :is(.post-tag,.topic-pill,.platform){
  border-color:rgba(255,181,126,.58);
  box-shadow:inset 0 1px 0 rgba(237,247,255,.35),0 0 0 2px #080c14,0 0 0 3px rgba(0,229,255,.18);
}

/* The tools' existing crown becomes a miniature carved instrument panel.
   The frieze repeats at its natural proportion; all moving parts stay in it. */
.tool-page .je-tool-crown{
  width:min(1400px,calc(100% - 28px));
  height:64px;
  flex:none;
  border:1px solid rgba(255,190,139,.85);
  border-radius:9px;
  background:
    linear-gradient(90deg,rgba(8,12,20,.5),transparent 20%,transparent 80%,rgba(8,12,20,.5)),
    var(--je-frieze) center/auto 100% repeat-x #080c14;
  box-shadow:inset 0 1px 0 #fff1d8,inset 0 0 0 3px #080c14,inset 0 0 0 4px rgba(0,229,255,.6),inset 0 0 0 6px #080c14,inset 0 0 0 7px rgba(255,145,77,.6),0 0 0 2px #080c14,0 0 0 3px rgba(0,229,255,.3),0 8px 18px rgba(0,0,0,.5);
}
.tool-page .je-tool-crown > .je-crown-center{
  position:relative;
  z-index:2;
  width:34px;
  height:34px;
  border:2px solid #b7faff;
  background:var(--je-diamond) center/contain no-repeat #080c14;
}
.tool-page .je-tool-crown > .je-crown-center::before{left:-24px;top:11px}
.tool-page .je-tool-crown > .je-crown-center::after{right:-24px;bottom:11px}
.je-crown-wing{
  position:absolute;
  top:50%;
  width:42px;
  height:42px;
  translate:-50% -50%;
  pointer-events:none;
}
.je-crown-wing-left{left:23.5%}
.je-crown-wing-right{left:76.5%}
.je-crown-wing > span{position:absolute;inset:0;display:block}
.je-crown-gem{
  background:var(--je-diamond) center/contain no-repeat;
  animation:je-jewel-flip calc(5s / var(--je-motion-css-speed,.12)) linear infinite !important;
}
.je-crown-ring{
  border:2px dashed #a3f7ff;
  border-radius:50%;
  box-shadow:0 0 0 2px #080c14,0 0 0 3px rgba(255,145,77,.75),0 0 12px rgba(0,229,255,.35);
  animation:je-jewel-turn calc(7s / var(--je-motion-css-speed,.12)) linear infinite reverse !important;
}
.je-crown-wing > .je-crown-ring-inner{
  inset:6px;
  border:3px double #ffb27b;
  border-radius:25%;
  box-shadow:inset 0 1px 0 #fff1d8;
  animation-duration:calc(3.5s / var(--je-motion-css-speed,.12)) !important;
  animation-direction:normal !important;
}
.je-crown-wing-right .je-crown-ring{animation-direction:normal !important}
.je-crown-wing-right .je-crown-gem,.je-crown-wing-right .je-crown-ring-inner{animation-direction:reverse !important}
.je-crown-chain{
  position:absolute;
  top:10px;
  bottom:10px;
  width:18%;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 11px,#fff1d8 12px 13px,transparent 14px 24px) center top/100% 2px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 11px,#a3f7ff 12px 13px,transparent 14px 24px) center bottom/100% 2px no-repeat;
  border-top:1px solid rgba(255,145,77,.5);
  border-bottom:1px solid rgba(0,229,255,.5);
}
.je-crown-chain-left{left:28%}
.je-crown-chain-right{right:28%}
.tool-page > header,.tool-page .pagehead{
  background:
    var(--je-engraving) center top/250px 4px repeat-x,
    linear-gradient(90deg,rgba(0,229,255,.1),transparent 36%,transparent 64%,rgba(255,145,77,.1)),
    #090e18 !important;
  box-shadow:inset 0 1px 0 rgba(237,247,255,.5),inset 0 -1px 0 rgba(255,145,77,.65),0 2px 0 #080c14,0 3px 0 rgba(0,229,255,.38),0 8px 18px rgba(0,0,0,.35);
}
.tool-page > header h1,.tool-page .ph-title{
  background-image:linear-gradient(110deg,#e8fdff,#00e5ff 28%,#b8e7de 49%,#ff914d 76%,#fff1d8);
  filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(0,229,255,.16));
}

/* Real DOM rims keep rotating colors inside a fixed two-pixel perimeter.
   No geometry, media, TAB sheet, or interactive surface is decorated. */
.tool-page .je-tool-frame{
  position:relative;
  --je-tool-orbit-time:4s;
  --je-tool-orbit-direction:normal;
  border-color:rgba(255,181,126,.65) !important;
  box-shadow:inset 0 1px 0 rgba(243,253,255,.55),0 0 0 1px rgba(0,229,255,.7),0 0 0 3px #080c14,0 0 0 4px rgba(255,145,77,.7),0 12px 28px rgba(0,0,0,.48) !important;
}
.tool-page .je-tool-frame:nth-child(even){--je-tool-orbit-time:5.5s;--je-tool-orbit-direction:reverse}
.je-tool-rim,.je-crown-rim{
  position:absolute !important;
  display:block;
  inset:0;
  margin:0 !important;
  box-sizing:border-box;
  border:0;
  border-radius:inherit;
  padding:2px;
  overflow:hidden;
  pointer-events:none;
  z-index:3;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.68;
  transition:opacity .18s ease;
}
.je-crown-rim{padding:3px;opacity:.9}
.je-tool-spectrum,.je-crown-spectrum{
  position:absolute;
  top:50%;
  left:50%;
  width:150%;
  min-width:120vh;
  aspect-ratio:1;
  background:var(--je-bright-spectrum);
  animation:je-border-orbit calc(var(--je-tool-orbit-time,4s) / var(--je-motion-css-speed,.12)) linear infinite var(--je-tool-orbit-direction,normal) !important;
}
.je-crown-spectrum{min-width:0;animation-duration:calc(3.6s / var(--je-motion-css-speed,.12)) !important}
@supports(width:1cqh){
  .je-tool-rim,.je-crown-rim{container-type:size}
  .je-tool-spectrum,.je-crown-spectrum{width:calc(100cqw + 100cqh);min-width:0}
}
.tool-page .je-tool-frame:is(:hover,:focus-within) > .je-tool-rim{opacity:1}
.tool-page :is(.je-tool-frame,.je-tool-crown):is(:hover,:focus-within){--je-motion-css-speed:1}
.tool-page .je-tool-frame::after{opacity:1}
.tool-page :is(.board,.exercise.card){
  border-color:rgba(255,181,126,.6) !important;
  box-shadow:inset 0 1px 0 rgba(243,253,255,.45),0 0 0 1px rgba(0,229,255,.6),0 0 0 3px #080c14,0 0 0 4px rgba(255,145,77,.55),0 10px 22px rgba(0,0,0,.42) !important;
}
.tool-page :is(.board-move-wrap,.board-edit-wrap,.root-wrap,.scale-wrap){
  border-color:rgba(0,229,255,.38);
  box-shadow:inset 0 1px 0 rgba(243,253,255,.28),inset 0 -1px 0 rgba(255,145,77,.45),0 0 0 1px #080c14;
}
.tool-page .group{
  border-top:3px double rgba(255,185,130,.5) !important;
  box-shadow:inset 0 1px 0 rgba(243,253,255,.3),0 0 0 1px rgba(0,229,255,.36),0 0 0 3px #080c14,0 0 0 4px rgba(255,145,77,.28) !important;
}
.tool-page .layout .left{top:136px}
/* The interval trainer uses the actual header/crown height, including wrapped
   buttons, instead of subtracting a fixed header estimate from the viewport. */
body.je-interval-tool{display:flex;flex-direction:column;height:100dvh}
.je-interval-tool > header{position:relative;height:auto;min-height:58px;flex:none;flex-wrap:wrap;gap:10px 16px}
.je-interval-tool > header .topBtns{flex-wrap:wrap}
.je-interval-tool .app{flex:1;min-height:0;height:auto;width:100%}
@media(max-width:1000px){
  body.je-interval-tool{height:auto;min-height:100dvh}
  .je-interval-tool .app{height:auto;flex:none}
}
@media(max-width:760px){
  .je-rich-page .home-hero{min-height:0;padding:54px 38px 42px}
  .je-rich-page .home-hero .home-title{font-size:clamp(25px,6vw,38px)}
  .je-rich-page .home-hero .home-subtitle{margin-top:16px}
  .je-rich-page .je-motion-card > .je-card-crest{height:38px;margin-bottom:14px}
  .je-rich-page .post-card > .je-card-crest{height:62px}
  .tool-page .je-tool-crown{height:48px;width:calc(100% - 20px)}
  .tool-page .je-tool-crown > .je-crown-center{width:26px;height:26px}
  .je-crown-wing{width:28px;height:28px}
  .je-crown-wing > .je-crown-ring-inner{inset:4px;border-width:2px}
  .je-crown-chain{top:8px;bottom:8px;width:14%}
  .je-crown-chain-left{left:30%}
  .je-crown-chain-right{right:30%}
  .tool-page .layout .left{top:auto}
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .je-tool-rim,.je-crown-rim{display:none}
}