/* Symmetrical background diagram for the Notes. The article remains the foreground. */
.note-stage{isolation:isolate;border-color:var(--tone-border-314132);background:radial-gradient(circle at 50% 48%,var(--tone-media-rgba1682388409),transparent 22%),linear-gradient(135deg,var(--tone-media-101610),var(--tone-media-090c0a))}
.note-stage::before{position:absolute;z-index:-2;inset:0;background-image:linear-gradient(var(--tone-media-rgba16823884045) 1px,transparent 1px),linear-gradient(90deg,var(--tone-media-rgba16823884045) 1px,transparent 1px);background-size:36px 36px;content:""}
.note-stage::after{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--tone-media-rgba1013116),transparent 30%,transparent 70%,var(--tone-media-rgba1013116));content:""}
.note-part{z-index:1;border-color:var(--tone-border-4a5b48);background:var(--tone-media-rgba16221678);backdrop-filter:blur(10px)}
.note-part.part-one{transform:translate(calc(-50% + var(--one-x,0px)),calc(-50% + var(--one-y,0px)))}
.note-part.part-two{transform:translate(calc(-50% + var(--two-x,0px)),calc(-50% + var(--two-y,0px)))}
.note-part.part-three{transform:translate(calc(-50% + var(--three-x,0px)),calc(-50% + var(--three-y,0px)))}
.system-shell{z-index:0;background:var(--tone-media-rgba10131142);backdrop-filter:blur(3px)}
.system-caption{z-index:2;padding:9px 12px;background:var(--tone-media-rgba10131172);backdrop-filter:blur(8px)}
.margin-note{z-index:2;padding:4px 9px;background:var(--tone-media-rgba10131166);backdrop-filter:blur(8px)}
@media(max-width:700px){.note-part.part-one,.note-part.part-two,.note-part.part-three{transform:none}.note-stage::after{background:var(--tone-media-rgba10131134)}}