/* JingleEngle structural ornamentation — ornaments live in page flow or borders. */
:root{
  --je-cyan:#00e5ff;
  --je-orange:#ff914d;
  --je-violet:#8f70ff;
  --je-ink:#edf7ff;
}

body{position:relative}

/* Main-page divider: a real layout element between content sections. */
.je-section-ornament{
  width:min(1040px,calc(100% - 40px));
  height:72px;
  margin:2px auto 10px;
  display:grid;
  grid-template-columns:1fr 92px 1fr;
  align-items:center;
  gap:0;
  overflow:hidden;
  pointer-events:none;
}
.je-section-ornament::before,
.je-section-ornament::after{
  content:"";
  height:18px;
  background:
    radial-gradient(circle at right center,#fff 0 1px,var(--je-cyan) 2px 4px,transparent 5px),
    linear-gradient(90deg,transparent,var(--je-cyan) 48%,var(--je-violet) 82%,var(--je-orange)) center/100% 1px no-repeat,
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(0,229,255,.22) 10px,transparent 11px 20px) center/100% 11px no-repeat;
  opacity:.9;
}
.je-section-ornament::after{
  transform:scaleX(-1);
  filter:hue-rotate(145deg);
}
.je-section-ornament span{
  position:relative;
  display:block;
  width:72px;
  height:52px;
  margin:auto;
  transform:rotate(45deg);
  border:1px solid rgba(0,229,255,.7);
  box-shadow:
    inset 0 0 0 7px rgba(15,15,30,.9),
    inset 0 0 0 8px rgba(255,145,77,.55),
    0 0 18px rgba(0,229,255,.12);
}
.je-section-ornament span::before,
.je-section-ornament span::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(143,112,255,.72);
}
.je-section-ornament span::after{
  inset:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px var(--je-cyan),0 0 12px rgba(0,229,255,.55);
}
.je-closing-ornament{
  margin-top:34px;
  margin-bottom:0;
  transform:scale(.82);
  opacity:.72;
}

/* Tool palette: exactly the landing-page family. */
.tool-page{
  --bg:#0b0b12;
  --panel:#0f0f1e;
  --panel-2:#121225;
  --panel2:#121225;
  --ink:#f5f5f5;
  --fg:#f5f5f5;
  --muted:#c9ccda;
  --line:rgba(255,255,255,.12);
  --accent:#00e5ff;
  --accent-2:#ff914d;
  --accent2:#ff914d;
  color-scheme:dark;
  color:#f5f5f5;
  /* Layer 1: ornaments are baked into the page background, behind the UI. */
  background:
    radial-gradient(circle at 22px 22px,#fff 0 1px,#00e5ff 2px 4px,transparent 5px) 18px 86px/110px 110px no-repeat,
    radial-gradient(circle at calc(100% - 22px) 22px,#fff 0 1px,#ff914d 2px 4px,transparent 5px) calc(100% - 18px) 86px/110px 110px no-repeat,
    linear-gradient(90deg,#00e5ff,transparent) 18px 106px/150px 1px no-repeat,
    linear-gradient(180deg,#00e5ff,transparent) 38px 86px/1px 160px no-repeat,
    linear-gradient(270deg,#ff914d,transparent) calc(100% - 18px) 106px/150px 1px no-repeat,
    linear-gradient(180deg,#ff914d,transparent) calc(100% - 38px) 86px/1px 160px no-repeat,
    repeating-linear-gradient(135deg,transparent 0 26px,rgba(0,229,255,.025) 27px,transparent 28px 54px),
    linear-gradient(135deg,#0b0b12 0%,#121225 40%,#0f1826 100%) !important;
}

.tool-page > header,
.tool-page .pagehead{
  background:rgba(0,0,0,.65) !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
  backdrop-filter:blur(8px);
}
.tool-page > header::after,
.tool-page .pagehead::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--je-cyan),rgba(255,255,255,.45),var(--je-orange),transparent);
}

/* Layer 2: an in-flow crown between the existing header and the work area. */
.je-tool-crown{
  position:relative;
  z-index:2;
  width:min(1000px,calc(100% - 32px));
  height:42px;
  margin:0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,var(--je-cyan),rgba(255,255,255,.38),var(--je-orange),transparent) center/100% 1px no-repeat,
    repeating-linear-gradient(135deg,transparent 0 13px,rgba(143,112,255,.24) 14px,transparent 15px 28px) center/72% 15px no-repeat;
}
.je-tool-crown span{
  width:26px;
  height:26px;
  transform:rotate(45deg);
  border:1px solid var(--je-cyan);
  background:#101020;
  box-shadow:inset 0 0 0 5px #101020,inset 0 0 0 6px var(--je-orange),0 0 12px rgba(0,229,255,.28);
}
.je-tool-crown span::before,
.je-tool-crown span::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border:1px solid var(--je-violet);
  background:#101020;
}
.je-tool-crown span::before{left:-23px;top:8px}
.je-tool-crown span::after{right:-23px;bottom:8px}

.tool-page > header h1,
.tool-page .ph-title,
.tool-page #brandTitle{
  margin-top:0;
  margin-bottom:0;
  background:linear-gradient(90deg,#00e5ff,#ff914d);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.tool-page select,
.tool-page input[type="text"],
.tool-page input[type="number"],
.tool-page textarea{
  color:#f5f5f5 !important;
  background-color:#151526 !important;
  border-color:rgba(255,255,255,.14) !important;
}
.tool-page .btn-home,
.tool-page .homeLink,
.tool-page .home-btn,
.tool-page .fileBtn{
  color:#f5f5f5;
  background:#151526;
  border-color:rgba(255,255,255,.14);
}
.tool-page button.primary,
.tool-page .primary,
.tool-page #play:not(.playing),
.tool-page .scale-apply{
  color:#0b0b12 !important;
  background:linear-gradient(45deg,#00e5ff,#ff914d) !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* Layer 3: ornament lives outside panel content as border and shadow rings. */
.tool-page .panel,
.tool-page .card,
.tool-page #options,
.tool-page .group,
.tool-page .neck{
  position:relative;
  background:rgba(15,15,30,.82) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    0 0 0 1px rgba(0,229,255,.2),
    0 0 0 3px rgba(11,11,18,.72),
    0 0 0 4px rgba(255,145,77,.14),
    0 12px 28px rgba(0,0,0,.28) !important;
}
.tool-page .panel + .panel,
.tool-page .card + .card,
.tool-page .group + .group{
  margin-top:5px;
}

/* Preserve the Metronome Tracker's six dashed guitar-string underlay. */
.tool-page .tabShell{
  position:relative;
  z-index:1;
  background:#0c121a !important;
}
.tool-page .tabLines{
  position:relative;
  z-index:1;
  display:block !important;
  color:#324258 !important;
  opacity:1 !important;
}
.tool-page .tabInput{z-index:2}

.tool-page button:focus-visible,
.tool-page a:focus-visible,
.tool-page input:focus-visible,
.tool-page select:focus-visible,
.tool-page textarea:focus-visible{
  outline:2px solid var(--je-cyan) !important;
  outline-offset:3px !important;
}

/* Account for the in-flow crown in viewport-fitted tools. */
.tool-page .app{height:calc(100vh - 100px)}
.tool-page .layout .left{top:114px}

@media (max-width:760px){
  .je-section-ornament{width:calc(100% - 24px);height:54px;grid-template-columns:1fr 60px 1fr}
  .je-section-ornament span{width:44px;height:34px}
  .je-section-ornament span::before{inset:8px}
  .je-section-ornament span::after{inset:15px}
  .tool-page{background:linear-gradient(135deg,#0b0b12 0%,#121225 40%,#0f1826 100%) !important}
  .je-tool-crown{height:30px;width:calc(100% - 20px)}
  .je-tool-crown span{width:18px;height:18px}
  .je-tool-crown span::before,.je-tool-crown span::after{display:none}
  .tool-page .app{height:calc(100vh - 88px)}
  .tool-page .layout .left{top:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}