/* v2026.09.11.7 — restore readable, full-width relief in the tool ornaments. */
body.je-filigree-tool .je-restored-band{
 position:relative;isolation:isolate;overflow:hidden;flex:none;
 height:clamp(64px,7.2vw,96px) !important;
 border:3px double #e5b07a !important;border-radius:12px;
 background:#080c14 !important;pointer-events:auto;
 box-shadow:inset 0 0 0 2px #061019,inset 0 0 0 3px #43d5df,inset 0 0 0 6px #080c14,inset 0 0 0 7px #b17a49,0 0 0 2px #080c14,0 0 0 3px #39c6d17d,0 7px 20px #0009 !important;
}
body.je-filigree-tool .je-restored-band > .je-band-art{
 position:absolute !important;inset:7px !important;width:calc(100% - 14px) !important;height:calc(100% - 14px) !important;
 display:block;max-width:none !important;border:0 !important;background:none !important;
 pointer-events:none;z-index:-1;overflow:hidden;
}
body.je-filigree-tool .je-restored-band.je-tool-tail{height:clamp(58px,6.3vw,84px) !important;margin-block:24px}
body.je-filigree-tool .je-unique-frame-card{--je-frame-corner:30px;--je-frame-edge:8px}
body.je-filigree-tool .je-unique-frame-card :is(.je-unique-top,.je-unique-bottom){height:28px}
body.je-filigree-tool :is(.je-tool-frame,.frame,.ornate){
 border-color:#dca972 !important;
 box-shadow:inset 0 1px 0 #fff1d888,inset 0 -1px 0 #62dfe466,0 0 0 1px #20ced799,0 0 0 3px #080c14,0 0 0 4px #bb875b,0 9px 24px #0008 !important;
}
body[data-unique-page="cycle"] .mast{
 padding:18px 22px 20px;border:3px double #c38c5f;border-radius:14px;
 background:radial-gradient(ellipse at 0 0,#00d6e519,transparent 55%),radial-gradient(ellipse at 100% 100%,#b8753824,transparent 55%),#0c121d;
 box-shadow:inset 0 0 0 3px #080c14,inset 0 0 0 4px #32c9d666,0 0 0 1px #28bdc977,0 7px 18px #0007;
}
body[data-unique-page="cycle"] .mast::after{bottom:-10px;height:3px;border:0;background:linear-gradient(90deg,#39d6e6,#b68251 32%,#fff1c6 50%,#b68251 68%,#39d6e6);box-shadow:0 2px 0 #080c14,0 3px 0 #955c38}
body[data-unique-page="cycle"] .mast a{
 padding:10px 16px;border-radius:9px;border:3px double #b98659;
 background:linear-gradient(125deg,#16313b,#0b131f 65%,#322219);
 box-shadow:inset 0 0 0 2px #080c14,inset 0 0 0 3px #3ccbd766,0 3px 9px #0008;
}
body[data-unique-page="cycle"] .mast a::after{display:none}
body[data-unique-page="cycle"] .app > section.ornate{padding-block:26px}
body[data-unique-page="cycle"] .je-unique-frame-card{--je-frame-corner:38px;--je-frame-edge:10px}
body[data-unique-page="cycle"] .je-unique-frame-card :is(.je-unique-top,.je-unique-bottom){height:36px}
body[data-unique-page="cycle"] .je-restored-band::before{z-index:2;padding:2px}
body[data-unique-page="cycle"] .je-restored-band::after{display:none}
body[data-unique-page="cycle"] :is(.block-card,.transition-card){border:3px double #9c795d;box-shadow:inset 0 0 0 2px #09131c,inset 0 0 0 3px #25c4d33d,0 3px 9px #0007}
body[data-unique-page="cycle"] .slider-head{border-bottom:1px solid #97684355;padding-bottom:4px}
body[data-unique-page="cycle"] .block-head{border-bottom:3px double #9c795d;padding-bottom:10px}
body[data-unique-page="cycle"] .footer{border-top:3px double #c59060;box-shadow:0 -3px 0 #080c14,0 -4px 0 #32c5d277}
/* Faceted moving fittings use the Cycle Explorer's existing slow/hover angle. */
.je-cycle-fittings{position:absolute;inset:0;pointer-events:none;z-index:2}
.je-cycle-fitting{position:absolute;left:50%;top:50%;width:30px;height:30px;translate:-50% -50%;transform:rotate(var(--angle));border:3px double #9ceff4;box-shadow:0 0 0 2px #07121c,0 0 0 3px #b1804b,0 0 14px #12c6d277;background:conic-gradient(from 45deg,#72eaf1,#174d61,#e9b883,#107c8e,#72eaf1)}
.je-cycle-fitting::before{content:"";position:absolute;inset:-10px;border:2px dashed #dda263;border-radius:50%;transform:rotate(calc(var(--angle) * -2))}
.je-cycle-fitting::after{content:"";position:absolute;inset:6px;border:1px solid #defeff;box-shadow:0 0 0 1px #075b6a}
@media(max-width:760px){
 body.je-filigree-tool .je-restored-band{height:70px !important}
 body.je-filigree-tool .je-restored-band.je-tool-tail{height:62px !important}
 body.je-filigree-tool .je-unique-frame-card{--je-frame-corner:24px;--je-frame-edge:6px}
 body.je-filigree-tool .je-unique-frame-card :is(.je-unique-top,.je-unique-bottom){height:22px}
 body[data-unique-page="cycle"] .mast{padding:16px 14px;gap:10px}
 body[data-unique-page="cycle"] .mast h1{font-size:29px}
 body[data-unique-page="cycle"] .mast a{padding:6px 10px}
 body[data-unique-page="cycle"] .app > section.ornate{padding-block:22px}
 body[data-unique-page="cycle"] .je-unique-frame-card{--je-frame-corner:28px;--je-frame-edge:7px}
 body[data-unique-page="cycle"] .je-unique-frame-card :is(.je-unique-top,.je-unique-bottom){height:26px}
}
/* The same finish continues into the working surfaces, never across notes. */
body.je-filigree-tool :is(input[type=range],input[type=checkbox]){accent-color:#00ddeb}
body.je-filigree-tool :is(button,select,input[type=number],input[type=text],textarea){
 border-color:#9d7658;box-shadow:inset 0 1px 0 #e9faff33,inset 0 -1px 0 #00d8e233,0 1px 0 #061119,0 2px 0 #30c4cf44;
}
body.je-filigree-tool :is(button,select,input):is(:hover,:focus-visible){border-color:#70e9ed;box-shadow:inset 0 1px 0 #fff0cc77,0 0 0 1px #ba895e,0 0 12px #00d5e22b}
body.je-filigree-tool :is(.controlRow,.compact-slider,.opt-item,.group,.block-settings > div,.board-controls > div,.modifier,.transition-amount,.stat,.settings-data fieldset){
 position:relative;border:1px solid #976a4999;border-radius:8px;
 background-color:#0d1b26;
 box-shadow:inset 0 0 0 2px #07121b,inset 0 0 0 3px #2496a340,0 2px 0 #030c14,0 3px 0 #c28b5244;
}
body.je-filigree-tool :is(.controlRow,.opt-item,.group,.settings-data fieldset){padding:9px 11px}
body.je-filigree-tool :is(.block-settings > div,.board-controls > div){padding:8px 10px}
body.je-filigree-tool :is(.compact-slider,.modifier,.stat){border-top:3px double #d3a571}
body.je-filigree-tool :is(.phrase-drawer,.reference-details,.notes,.help-content,.weak-section,.progress-actions){
 border:3px double #ad815b;border-radius:12px;padding:12px 14px;
 box-shadow:inset 0 0 0 2px #080c14,inset 0 0 0 3px #20b3bf44,0 4px 14px #0005;
}
body.je-filigree-tool .je-depth-host{
 position:relative;border-color:#d2a475;
 background-image:linear-gradient(100deg,#12b7c511,transparent 40%,#b5773f12);
}
.je-depth-art{display:block;position:relative;grid-column:1/-1;flex-basis:100%;width:min(160px,65%);height:32px;margin:5px auto 9px;pointer-events:none;overflow:hidden}
.je-depth-art > span{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.je-depth-art img{position:absolute !important;display:block !important;max-width:none !important;max-height:none !important;margin:0 !important;border:0 !important;border-radius:0 !important;pointer-events:none !important;object-fit:fill !important;opacity:1 !important;box-shadow:none !important}
body.je-metronome .left > .card{padding-top:32px !important;padding-bottom:28px !important}
body.je-metronome .controlRow{margin-bottom:8px;gap:10px}
body.je-metronome .beatLights{padding:8px 0 2px}
body.je-metronome .exercise .head{padding-block:8px}
body.je-metronome .exercise.card{border:3px double #c69b6c;padding-bottom:14px}
body.je-metronome .exercise.card > .je-depth-art{height:28px;margin-block:3px 5px}
body[data-unique-page="triad"] .je-unique-frame-card :is(.je-unique-top,.je-unique-bottom){height:12px}
body[data-unique-page="triad"] :is(.compact-slider,.compact-fingering){box-shadow:inset 0 1px 0 #f5ddaa55,inset 0 -2px 0 #168a9944,0 0 0 1px #070e19}
body[data-unique-page="triad"] .je-depth-art{height:22px;margin-block:3px 5px}
body[data-unique-page="interval"] .settings-data fieldset{margin-block:9px}
/* Main-page cards, headings and lower sections keep the homepage's depth. */
body.je-filigree-page .je-motion-card{
 border-color:#dba06b;box-shadow:inset 0 1px 0 #f1e8cc99,0 0 0 1px #2bd2dd99,0 0 0 4px #07121b,0 0 0 5px #b58454,0 12px 32px #0009;
 background-image:radial-gradient(ellipse at 0 0,#17657133,transparent 55%),radial-gradient(ellipse at 100% 100%,#ab653122,transparent 60%);
}
body.je-filigree-page .je-unique-frame-card{--je-frame-corner:44px;--je-frame-edge:14px}
body.je-filigree-page :is(.je-card-crest,.je-lace-plaque){box-shadow:inset 0 1px 0 #fff2d4aa,inset 0 -1px 0 #12c9db,0 0 0 2px #061019,0 0 0 3px #ba8454,0 5px 16px #0009}
body.je-filigree-page :is(.featured-section,.collection-picks,.je-stream-heading) > h2{
 padding-bottom:16px;border-bottom:3px double #c18b59;text-shadow:0 2px 0 #02090e,0 0 17px #29bec040;
 box-shadow:0 2px 0 #061019,0 3px 0 #20b3bf55;
}
body.je-filigree-page :is(.topic-pill,.platform,.post-tag){border:3px double #bc8859;box-shadow:inset 0 1px 0 #eeefc466,0 3px 8px #0007}
body.je-filigree-page .site-footer{border-top:3px double #d0a06e;box-shadow:0 -3px 0 #061019,0 -4px 0 #2cd4df,0 -12px 32px #00a8b422}
body.je-filigree-page .je-restored-band{position:relative;isolation:isolate;overflow:hidden;height:clamp(70px,7vw,96px);border:3px double #dca36b;background-color:#080c14 !important;box-shadow:inset 0 0 0 3px #07121b,inset 0 0 0 4px #2ed6df99,0 0 0 2px #08131c,0 0 0 3px #b17e52,0 8px 24px #0009}
body.je-filigree-page .je-restored-band > .je-band-art{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);z-index:-1;pointer-events:none;overflow:hidden}
body.je-filigree-page .je-restored-band > .je-unique-frame-rail{display:none !important}
.je-footer-relief{width:min(1120px,calc(100% - 36px));margin:24px auto 30px;border-radius:12px}
@media(max-width:760px){
 body.je-filigree-page .je-unique-frame-card{--je-frame-corner:34px;--je-frame-edge:10px}
 body.je-filigree-page .je-restored-band{height:72px}
 body.je-metronome .controlRow{padding:8px;gap:7px}
 body.je-filigree-tool :is(.block-settings > div,.board-controls > div){padding:6px}
}
/* No anamorphic scaling: give carved bands enough height for their contours. */
body.je-filigree-tool .je-restored-band,body.je-filigree-page .je-restored-band{height:clamp(74px,10.5vw,148px) !important}
body.je-filigree-tool .je-restored-band.je-tool-tail{height:clamp(68px,9.5vw,132px) !important}
body.je-filigree-page .je-lace-plaque{height:48px;min-height:48px;border-radius:14px;width:min(230px,calc(100% - 36px)) !important;margin-inline:auto !important}
body.je-filigree-page .je-lace-plaque::before,body.je-filigree-page .je-lace-plaque::after{top:17px}
body.je-filigree-page .je-lace-plaque::before{left:9%}
body.je-filigree-page .je-lace-plaque::after{right:9%}
body.je-filigree-page .je-card-crest{height:58px}
body.je-filigree-tool .controlRow > .je-depth-art{flex-basis:auto;width:95px !important;max-width:30%;height:36px !important;margin:0 0 0 auto}
body[data-unique-page="cycle"] :is(.key-strip,.random-panel) > .je-depth-art{justify-self:center}
body[data-unique-page="cycle"] .je-depth-art{grid-column:1/-1}
body.je-filigree-tool .je-depth-art{align-self:center}
@media(max-width:760px){
 body.je-filigree-tool .je-restored-band,body.je-filigree-page .je-restored-band{height:76px !important}
 body.je-filigree-tool .je-restored-band.je-tool-tail{height:68px !important}
 body.je-filigree-tool .controlRow > .je-depth-art{display:none}
 body.je-filigree-page .je-card-crest{height:52px}
}
body[data-unique-page="cycle"] :is(.key-strip > div:not(.source-row),.tempo-control,.length-control,.volume-control,.repeat-line > div,.board-controls > div,.random-strength){
 border:3px double #9d7957;border-radius:10px;padding:9px 11px;
 background:linear-gradient(120deg,#11313b88,#0b1825 65%,#2b201966);
 box-shadow:inset 0 0 0 2px #07121b,inset 0 0 0 3px #30b7c444,0 3px 9px #0005;
}
@media(max-width:760px){body[data-unique-page="cycle"] :is(.key-strip > div:not(.source-row),.tempo-control,.length-control,.volume-control,.repeat-line > div,.board-controls > div,.random-strength){padding:7px}}
/* Fit the Metronome relief below each label in its own reserved strip. */
body.je-metronome .controlRow.je-depth-host{min-height:76px;position:relative}
body.je-metronome .controlRow.je-depth-host > label{align-self:start;margin-top:3px}
body.je-metronome .controlRow > .je-depth-art{position:absolute;left:11px;bottom:5px;width:80px !important;height:30px !important;max-width:none;margin:0 !important}
@media(max-width:760px){body.je-metronome .controlRow.je-depth-host{min-height:64px}body.je-metronome .controlRow > .je-depth-art{display:block;width:65px !important;height:25px !important;bottom:4px}body.je-metronome .controlRow.je-depth-host > label{margin-top:0}}
/* Flex/grid may place these pieces, but may never stretch their artwork. */
body.je-filigree-tool .je-depth-art{flex:0 0 auto !important;width:min(var(--relief-width,140px),65%);height:auto !important;min-height:0 !important;aspect-ratio:var(--relief-ratio,3);justify-self:center}
body[data-unique-page="triad"] .je-unique-frame-card{--je-frame-corner:20px}
body[data-unique-page="home"] .je-card-mini-top{position:relative;display:block;grid-column:1/-1;width:min(160px,65%);height:70px;margin:10px auto 8px;pointer-events:none;flex:none}
body[data-unique-page="home"] .je-card-mini-top > svg,body[data-unique-page="home"] .je-lace-plaque > .je-band-art{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;overflow:hidden}
body[data-unique-page="home"] .je-lace-plaque{height:68px;min-height:68px}
body[data-unique-page="home"] .je-lace-plaque::before,body[data-unique-page="home"] .je-lace-plaque::after{top:27px}
body[data-unique-page="triad"] .consolidated-controls{padding-top:18px}
body.je-metronome .controlRow > .je-depth-art{height:auto !important}
body.je-filigree-tool label:has(> input[type=range]){
 border:3px double #a47b56;border-radius:9px;padding:7px 9px;
 background:linear-gradient(110deg,#15354099,#0c1928 70%,#33221655);
 box-shadow:inset 0 0 0 2px #07121b,inset 0 0 0 3px #38b9c34d,0 3px 8px #0005;
}
body.je-filigree-page :is(.je-stream-player,.je-stream-chat){border:3px double #b78458;box-shadow:0 0 0 2px #07121b,0 0 0 3px #2abac66b,inset 0 1px 0 #d6faff77}
@media(max-width:760px){body.je-metronome .controlRow.je-depth-host{min-height:80px}}

/* v2026.09.11.8: choose a relief for its setting, then preserve its shape. */
body.je-filigree-tool .je-depth-art{
 width:min(78%,270px);height:auto !important;max-width:100%;
 aspect-ratio:var(--relief-ratio);margin:12px auto 9px;
}
body.je-filigree-tool .je-depth-art.je-relief-band{
 --band-height:64px;
 box-sizing:content-box;width:100%;max-width:1200px;height:auto !important;
 min-height:var(--band-height) !important;aspect-ratio:var(--relief-ratio);border-block:3px double #ad8059;
 margin:12px auto 8px;
 background:linear-gradient(90deg,#0b202d88,#111927,#0b202d88);
 box-shadow:0 -2px 0 #07131c,0 -3px 0 #2bc3cf55,0 2px 0 #07131c,0 3px 0 #2bc3cf55;
}
.je-relief-band .je-relief-source{
 position:absolute;left:50%;top:50%;translate:-50% -50%;
 width:max(100%,calc(var(--band-height) * var(--relief-aspect)));
 height:auto;max-width:none;aspect-ratio:var(--relief-ratio);overflow:hidden;
}
body[data-unique-page="fretboard"] .opt-item > .je-depth-art{
 width:min(86%,286px);margin-top:auto;margin-bottom:5px;
}
body[data-unique-page="fretboard"] .opt-item{gap:10px;padding-bottom:14px}
body[data-unique-page="fretboard"] .board-controls > .je-relief-band{max-width:none;margin-top:8px;margin-bottom:0}
body[data-unique-page="cycle"] :is(.block-settings > div,.board-controls > div) > .je-depth-art{width:min(82%,210px)}
body[data-unique-page="cycle"] :is(.block-card,.transition-card) > .je-depth-art{width:min(72%,270px)}
body[data-unique-page="triad"] :is(.harmony-strip,.map-options) > .je-relief-band{flex:0 0 100% !important;--band-height:64px;margin-block:8px 3px}
body[data-unique-page="triad"] .reference-details > .je-relief-band{margin-top:4px}
body[data-unique-page="timeline"] :is(.root-wrap,.scale-wrap) > .je-depth-art{width:min(70%,220px)}
body[data-unique-page="timeline"] .scale-wrap > .je-relief-band{width:100%;flex:0 0 100% !important}
body[data-unique-page="interval"] :is(.board-controls,.answer-actions){flex-wrap:wrap}
body[data-unique-page="interval"] :is(.board-controls,.answer-actions) > .je-relief-band{flex:0 0 100% !important}
body[data-unique-page="interval"] .board-panel{padding-bottom:30px}
body.je-metronome .left > .card > .je-depth-art{width:min(84%,270px);margin-top:12px}
body.je-metronome .controlRow.je-depth-host{padding-bottom:60px;min-height:0}
body.je-metronome .controlRow.je-depth-host > label{align-self:center;margin-top:0}
body.je-metronome .controlRow > .je-depth-art{width:120px !important;left:12px;bottom:5px}
@media(max-width:760px){
 body.je-filigree-tool .je-depth-art{width:min(80%,250px)}
 body.je-filigree-tool .je-depth-art.je-relief-band{--band-height:62px;width:100%}
 body[data-unique-page="triad"] :is(.harmony-strip,.map-options) > .je-relief-band{--band-height:58px}
 body.je-metronome .controlRow > .je-depth-art{width:116px !important}
}