@phun-ky/speccer
Version:
A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
1 lines • 37.1 kB
CSS
.ph-speccer.speccer{--ph-speccer-color-artificialStrawberry:#ff3aa8;--ph-speccer-color-venusSlipperOrchid:#db6fff;--ph-speccer-color-superBanana:#fff76f;--ph-speccer-color-white:#fff;--ph-speccer-color-carbon:#333;--ph-speccer-color-red:red;--ph-speccer-color-niuZaiSeDenim:#0074e8;--ph-speccer-color-beautifulBlue:#1868b2;--ph-speccer-color-fuchsiaBlue:#7e60c5;--ph-speccer-color-sangDeBoeuf:#7a1000;--ph-speccer-color-galacticPurple:#3f2f9b;--ph-speccer-base-color:var(--ph-speccer-color-artificialStrawberry);--ph-speccer-spacing-color:var(--ph-speccer-base-color);--ph-speccer-spacing-padding-color:var(--ph-speccer-color-carbon);--ph-speccer-spacing-padding-color-background:rgb(from var(--ph-speccer-color-venusSlipperOrchid) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-margin-color:var(--ph-speccer-color-red);--ph-speccer-spacing-margin-color-background:rgb(from var(--ph-speccer-color-superBanana) r g b/var(--ph-speccer-opacity-40));--ph-speccer-spacing-line-width:var(--ph-speccer-line-width);--ph-speccer-typography-background-color:var(--ph-speccer-color-white);--ph-speccer-typography-color-property:var(--ph-speccer-color-niuZaiSeDenim);--ph-speccer-typography-color-text:var(--ph-speccer-base-color);--ph-speccer-typography-color-value:var(--ph-speccer-base-color);--ph-speccer-mark-background-color:rgb(from var(--ph-speccer-base-color) r g b/var(--ph-speccer-opacity-20));--ph-speccer-mark-border-color:var(--ph-speccer-base-color);--ph-speccer-mark-border-width:1.5px;--ph-speccer-mark-border-style:solid;--ph-speccer-measure-color:var(--ph-speccer-color-red);--ph-speccer-measure-line-width:1.5px;--ph-speccer-measure-border-style:dotted;--ph-speccer-measure-size:8px;--ph-speccer-a11y-color-background:var(--ph-speccer-color-beautifulBlue);--ph-speccer-a11y-landmark-color-background:var(--ph-speccer-color-fuchsiaBlue);--ph-speccer-a11y-autocomplete-color-background:var(--ph-speccer-color-sangDeBoeuf);--ph-speccer-a11y-headings-color-background:var(--ph-speccer-color-galacticPurple);--ph-speccer-color-text-light:var(--ph-speccer-color-white);--ph-speccer-color-text-dark:var(--ph-speccer-color-carbon);--ph-speccer-pin-color:var(--ph-speccer-base-color);--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-height:12px;--ph-speccer-line-width:1.5px;--ph-speccer-line-width-negative:-1.5px;--ph-speccer-opacity-20:0.2;--ph-speccer-opacity-40:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-transition-default:all 2s cubic-bezier(0.4,0,0.2,1)}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before{font-family:var(--ph-speccer-font-family);justify-content:center;align-items:center;z-index:99999;position:absolute;display:flex;font-size:12px;line-height:12px}.ph-speccer.speccer,.ph-speccer.speccer:after,.ph-speccer.speccer:before,svg.ph-speccer{pointer-events:none;user-select:none;box-sizing:border-box;margin:0;padding:0}#ph-speccer-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}svg.ph-speccer :is(.ph-speccer.circle,.ph-speccer.path){color:var(--ph-speccer-base-color,#ff3aa8)}[data-speccer=pin-area]{counter-reset:type}.ph-speccer.speccer.pin{font-family:var(--ph-speccer-font-family);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);display:flex;border-radius:100%;color:var(--ph-speccer-color-text-light);font-weight:400;align-items:center;justify-content:center;line-height:150%;font-size:16px;z-index:100000}.ph-speccer.speccer.pin,.ph-speccer.speccer.pin:after{position:absolute;background-color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin:after{content:"";height:var(--ph-speccer-pin-space);top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph-speccer.speccer.pin.curly:after,.ph-speccer.speccer.pin.svg:after,.ph-speccer.speccer.pin.text:after{content:none}.ph-speccer.speccer.pin.top:after,.ph-speccer.speccer.pin:after{height:var(--ph-speccer-pin-space);width:var(--ph-speccer-line-width);top:100%;right:50%}.ph-speccer.speccer.pin.left:after{right:auto}.ph-speccer.speccer.pin.right:after{left:auto}.ph-speccer.speccer.pin.bottom:after{height:var(--ph-speccer-pin-space);width:var(--ph-speccer-line-width);top:calc(-100% - var(--ph-speccer-pin-space)/2);right:50%}.ph-speccer.speccer.pin.left:after{left:100%}.ph-speccer.speccer.pin.left:after,.ph-speccer.speccer.pin.right:after{height:var(--ph-speccer-line-width);width:var(--ph-speccer-pin-space);top:50%}.ph-speccer.speccer.pin.right:after{right:100%}.ph-speccer.path.speccer.text,.ph-speccer.speccer.pin.text{color:var(--ph-speccer-color-text-dark)}.ph-speccer.speccer.pin.text{font-family:var(--ph-speccer-font-family);height:auto;min-height:var(--ph-speccer-pin-size);display:flex;position:absolute;border-radius:0;background-color:initial;font-weight:400;align-items:flex-start;justify-content:center;line-height:130%;z-index:100000;flex-direction:column;width:250px;grid-gap:2px}.ph-speccer.speccer.pin.text.right{padding-left:1rem}.ph-speccer.speccer.pin.text.left{padding-right:1rem;width:170px}.ph-speccer.speccer.pin.text.top{padding-bottom:1rem}.ph-speccer.speccer.pin.text.bottom{padding-top:1rem}.ph-speccer.speccer.pin.text .ph-speccer.title{text-transform:uppercase;font-weight:500;font-size:11px}.ph-speccer.speccer.pin.text .ph-speccer.description,.ph-speccer.speccer.pin.text .ph-speccer.heading{line-height:130%;position:relative;font-weight:600;font-size:.875rem}.ph-speccer.speccer.pin.text .ph-speccer.heading{text-transform:uppercase;color:var(--ph-speccer-base-color)}.ph-speccer.speccer.pin.enclose{border-radius:0;background-color:initial;color:var(--ph-speccer-measure-color);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose:after{top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));bottom:auto}.ph-speccer.speccer.pin.enclose:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph-speccer.speccer.pin.enclose.right:before{left:100%;right:auto}.ph-speccer.speccer.pin.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph-speccer.speccer.pin.enclose.left:before{right:100%;left:auto}.ph-speccer.speccer.pin.enclose.top:after{top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));bottom:auto}.ph-speccer.speccer.pin.enclose.top:before{bottom:100%;top:auto}.ph-speccer.speccer.pin.enclose.bottom:after{top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));bottom:auto}.ph-speccer.speccer.pin.enclose.bottom:before{top:100%;bottom:auto}.ph-speccer.speccer.pin.enclose.left,.ph-speccer.speccer.pin.enclose.right{width:8px}.ph-speccer.speccer.pin.enclose,.ph-speccer.speccer.pin.enclose.bottom,.ph-speccer.speccer.pin.enclose.top{height:8px}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{content:attr(data-pin-counter);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);display:flex;position:absolute;border-radius:100%;background-color:var(--ph-speccer-pin-color);color:var(--ph-speccer-color-text-light);align-items:center;justify-content:center;line-height:150%;font-size:16px;z-index:100000}.ph-speccer.speccer.pin.enclose.left:after,.ph-speccer.speccer.pin.enclose.right:after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.enclose.bottom:after,.ph-speccer.speccer.pin.enclose.top:after,.ph-speccer.speccer.pin.enclose:after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{content:"";position:absolute;background-color:var(--ph-speccer-pin-color);z-index:100000;display:block}.ph-speccer.speccer.pin.enclose.left:before,.ph-speccer.speccer.pin.enclose.right:before{top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.enclose.bottom:before,.ph-speccer.speccer.pin.enclose.top:before,.ph-speccer.speccer.pin.enclose:before{left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width);height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.bracket:not(.curly){border-radius:0;background-color:initial;color:var(--ph-speccer-measure-color);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket:not(.curly):after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly):before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket:not(.curly).right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).right:before{left:100%;right:auto}.ph-speccer.speccer.pin.bracket:not(.curly).left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket:not(.curly).left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).left:before{right:100%;left:auto}.ph-speccer.speccer.pin.bracket:not(.curly).top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket:not(.curly).top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).top:before{bottom:100%}.ph-speccer.speccer.pin.bracket:not(.curly).bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph-speccer.speccer.pin.bracket:not(.curly).bottom:before{top:100%}.ph-speccer.speccer.pin.bracket.left:not(.curly),.ph-speccer.speccer.pin.bracket.right:not(.curly){width:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly),.ph-speccer.speccer.pin.bracket.top:not(.curly),.ph-speccer.speccer.pin.bracket:not(.curly){height:8px}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{content:attr(data-pin-counter);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);display:flex;position:absolute;border-radius:100%;background-color:var(--ph-speccer-pin-color);color:var(--ph-speccer-color-text-light);align-items:center;justify-content:center;line-height:150%;font-size:16px;z-index:100000}.ph-speccer.speccer.pin.bracket.left:not(.curly):after,.ph-speccer.speccer.pin.bracket.right:not(.curly):after{top:50%;transform:translateY(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):after,.ph-speccer.speccer.pin.bracket.top:not(.curly):after,.ph-speccer.speccer.pin.bracket:not(.curly):after{left:50%;transform:translateX(-50%)}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{content:"";position:absolute;background-color:var(--ph-speccer-pin-color);z-index:100000;display:block}.ph-speccer.speccer.pin.bracket.left:not(.curly):before,.ph-speccer.speccer.pin.bracket.right:not(.curly):before{top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.bracket.bottom:not(.curly):before,.ph-speccer.speccer.pin.bracket.top:not(.curly):before,.ph-speccer.speccer.pin.bracket:not(.curly):before{left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width);height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph-speccer.speccer.pin.subtle{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);background-color:var(--ph-speccer-color-text-light);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.subtle.bottom:after,.ph-speccer.speccer.pin.subtle.top:after{width:0;background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.subtle.left:after,.ph-speccer.speccer.pin.subtle.right:after{height:0;background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle{background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly){background-color:initial}.ph-speccer.speccer.pin.bracket.subtle:not(.curly),.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-bottom:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-top:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-left:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-right:none}.ph-speccer.speccer.pin.bracket.subtle:not(.curly):after{height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);background-color:var(--ph-speccer-color-text-light);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).bottom:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).top:before{width:0;background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.bracket.subtle:not(.curly).left:before,.ph-speccer.speccer.pin.bracket.subtle:not(.curly).right:before{height:0;background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle{border-style:dashed}.ph-speccer.speccer.pin.enclose.subtle:after{height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);background-color:var(--ph-speccer-color-text-light);color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle.bottom:before,.ph-speccer.speccer.pin.enclose.subtle.top:before{width:0;background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.pin.enclose.subtle.left:before,.ph-speccer.speccer.pin.enclose.subtle.right:before{height:0;background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color)}.ph-speccer.speccer.a11y.landmark{position:absolute;background-color:var(--ph-speccer-a11y-landmark-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center;font-size:12px;height:28px;line-height:28px;align-items:center;padding:0 .5rem;pointer-events:auto}.ph-speccer.speccer.a11y.landmark:after{content:"";height:0;width:0;position:absolute;pointer-events:none;border:14.2px solid #7e60c500}.ph-speccer.speccer.a11y.landmark.left:after,.ph-speccer.speccer.a11y.landmark:after{top:50%;left:100%;border-left-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.top:after{top:0;left:50%;border-bottom-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.landmark.right:after{top:50%;left:0;border-right-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.landmark.bottom:after{top:0;left:50%;border-top-color:var(--ph-speccer-a11y-landmark-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.region{position:absolute;outline:2px solid var(--ph-speccer-a11y-landmark-color-background);outline-offset:2px}.ph-speccer.speccer.a11y.tabstops{position:absolute;font-family:var(--ph-speccer-font-family);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size);background-color:var(--ph-speccer-a11y-color-background);border-radius:50%;color:var(--ph-speccer-color-text-light);font-weight:400;align-items:center;justify-content:center;line-height:150%;font-size:16px;display:flex}.ph-speccer.speccer.a11y.tabstops:before{position:static;content:attr(data-speccer-a11y-tabstops);text-align:center}.ph-speccer.speccer.a11y.shortcut-holder{position:absolute;min-width:120px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;grid-gap:.5rem}.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{flex-shrink:0;position:relative;background-color:var(--ph-speccer-a11y-color-background);border-radius:.5rem;display:inline-flex;text-transform:uppercase;border:1pt solid var(--ph-speccer-a11y-color-background);font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.5rem .75rem;text-transform:lowercase}.ph-speccer.speccer.a11y.autocomplete,.ph-speccer.speccer.a11y.shortcut-holder kbd.ph-speccer.speccer.a11y.shortcut{color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center;align-items:center}.ph-speccer.speccer.a11y.autocomplete{position:absolute;background-color:var(--ph-speccer-a11y-autocomplete-color-background);font-size:12px;height:28px;line-height:28px;padding:0 .5rem;pointer-events:auto}.ph-speccer.speccer.a11y.autocomplete:after{content:"";height:0;width:0;position:absolute;pointer-events:none;border:14.2px solid #7e60c500}.ph-speccer.speccer.a11y.autocomplete.left:after,.ph-speccer.speccer.a11y.autocomplete:after{top:50%;left:100%;border-left-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.top:after{top:0;left:50%;border-bottom-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.autocomplete.right:after{top:50%;left:0;border-right-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.autocomplete.bottom:after{top:0;left:50%;border-top-color:var(--ph-speccer-a11y-autocomplete-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings{position:absolute;background-color:var(--ph-speccer-a11y-headings-color-background);color:var(--ph-speccer-color-text-light);font-family:var(--ph-speccer-font-family);justify-content:center;font-size:12px;height:28px;line-height:28px;align-items:center;padding:0 .5rem;pointer-events:auto}.ph-speccer.speccer.a11y.headings:after{content:"";height:0;width:0;position:absolute;pointer-events:none;border:14.2px solid #7e60c500}.ph-speccer.speccer.a11y.headings.left:after,.ph-speccer.speccer.a11y.headings:after{top:50%;left:100%;border-left-color:var(--ph-speccer-a11y-headings-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.top:after{top:0;left:50%;border-bottom-color:var(--ph-speccer-a11y-headings-color-background);transform:translateX(-50%)}.ph-speccer.speccer.a11y.headings.right:after{top:50%;left:0;border-right-color:var(--ph-speccer-a11y-headings-color-background);transform:translateY(-50%)}.ph-speccer.speccer.a11y.headings.bottom:after{top:0;left:50%;border-top-color:var(--ph-speccer-a11y-headings-color-background);transform:translateX(-50%)}.ph-speccer.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);font-size:10px;padding:8px;max-width:320px;width:auto;display:block;text-align:left;line-height:140%}.ph-speccer.speccer.typography,.ph-speccer.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph-speccer.speccer.typography:after{content:"";position:absolute;display:block;background-color:var(--ph-speccer-pin-color)}.ph-speccer.speccer.typography.left:after,.ph-speccer.speccer.typography:after{left:100%;top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.right:after{left:auto;right:100%;top:50%;transform:translateY(-50%);height:var(--ph-speccer-line-width);width:var(--ph-speccer-pin-space)}.ph-speccer.speccer.typography.top:after{top:100%}.ph-speccer.speccer.typography.bottom:after,.ph-speccer.speccer.typography.top:after{left:50%;right:auto;transform:translateX(-50%);height:var(--ph-speccer-pin-space);width:var(--ph-speccer-line-width)}.ph-speccer.speccer.typography.bottom:after{top:auto;bottom:100%}.ph-speccer.speccer.typography .speccer-styles{list-style:none;width:100%;margin:0;line-height:140%;padding:0 0 0 8px;font-size:10px}.ph-speccer.speccer.typography .speccer-styles .property{font-weight:400;color:var(--ph-speccer-typography-color-property);text-align:left;padding:0;font-size:10px;margin:0}.ph-speccer.speccer.typography .speccer-styles>li{font-weight:400;color:var(--ph-speccer-typography-color-value);text-align:left;padding:0;font-size:10px;margin:0;list-style:none;border:none}.ph-speccer.speccer.typography.syntax>pre{margin:0;padding:0;font-size:12px;line-height:1.5;font-family:var(--ph-speccer-font-family);color:var(--ph-speccer-color-text-light);background:#0000;border-radius:0}.ph-speccer.speccer.typography.syntax{--ph-speccer-color-code-color-1:#737373;--ph-speccer-color-code-color-2:#ff3aa8;--ph-speccer-color-code-color-3:#38383d;--ph-speccer-color-code-color-4:#ff3aa8;--ph-speccer-color-code-color-5:#ff3aa8;--ph-speccer-color-code-color-6:#0074e8;--ph-speccer-color-code-color-7:#000;--ph-speccer-color-code-color-8:#cd0404}.ph-speccer.speccer.typography.syntax .namespace{opacity:.7}.ph-speccer.speccer.typography.syntax :is(.token.cdata,.token.comment,.token.doctype,.token.prolog){color:var(--ph-speccer-color-code-color-1)}.ph-speccer.speccer.typography.syntax :is(.token.boolean,.token.null,.token.number,.token.operator){color:var(--ph-speccer-color-code-color-5)}.ph-speccer.speccer.typography.syntax .token.attr-name{color:var(--ph-speccer-color-code-color-2)}.ph-speccer.speccer.typography.syntax .token.selector,.ph-speccer.speccer.typography.syntax :is(.token.entity,.token.string,.token.url){color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax :is(.token.atrule,.token.attr-value,.token.control,.token.directive,.token.important,.token.keyword,.token.unit){color:var(--ph-speccer-color-code-color-4)}.ph-speccer.speccer.typography.syntax :is(.token.regex,.token.statement){color:var(--ph-speccer-color-code-color-3)}.ph-speccer.speccer.typography.syntax :is(.token.placeholder,.token.variable),.ph-speccer.speccer.typography.syntax :is(.token.property,.token.tag){color:var(--ph-speccer-color-code-color-6)}.ph-speccer.speccer.typography.syntax :is(.token.important,.token.statement){font-weight:700}.ph-speccer.speccer.typography.syntax .token.punctuation{color:var(--ph-speccer-color-code-color-7)}.ph-speccer.speccer.typography.syntax .token.entity{cursor:help}.ph-speccer.speccer.typography.syntax .token.debug{color:var(--ph-speccer-color-code-color-8)}.ph-speccer.speccer.speccer-grid-container{counter-reset:column-gap;column-gap:var(--ph-speccer-grid-gap-original)}.ph-speccer.speccer.speccer-grid-container,.ph-speccer.speccer.speccer-grid-row-container{justify-content:normal;transition:var(--ph-speccer-transition-default);display:grid;position:absolute}.ph-speccer.speccer.speccer-grid-row-container{counter-reset:row-gap;row-gap:var(--ph-speccer-grid-row-gap-original)}.ph-speccer.speccer.speccer-grid-item{transition:var(--ph-speccer-transition-default);position:relative;height:100%;border-left:1px solid var(--ph-speccer-base-color);border-right:1px solid var(--ph-speccer-base-color)}.ph-speccer.speccer.speccer-grid-row-item{transition:var(--ph-speccer-transition-default);position:relative;height:100%;border-top:1px solid var(--ph-speccer-base-color);border-bottom:1px solid var(--ph-speccer-base-color);width:100%}.ph-speccer.speccer.speccer-grid-item:before{counter-increment:column-gap;content:counter(column-gap);top:-32px;left:100%;height:32px;width:calc(var(--ph-speccer-grid-gap) + 2px);border-top-right-radius:50%}.ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-row-item:before{transition:var(--ph-speccer-transition-default);font-family:var(--ph-speccer-font-family);font-size:16px;position:absolute;background-color:var(--ph-speccer-base-color);display:flex;justify-content:center;align-items:center;color:var(--ph-speccer-color-text-light);border-top-left-radius:50%}.ph-speccer.speccer.speccer-grid-row-item:before{counter-increment:row-gap;content:counter(row-gap);left:-32px;top:100%;width:32px;height:calc(var(--ph-speccer-grid-row-gap) + 2px);border-bottom-left-radius:50%}.ph-speccer.speccer.speccer-grid-item:first-child:after{counter-increment:column-gap;content:counter(column-gap);top:-32px;left:100%;height:32px;width:calc(var(--ph-speccer-grid-gap) + 2px);border-top-right-radius:50%}.ph-speccer.speccer.speccer-grid-item:first-child:after,.ph-speccer.speccer.speccer-grid-row-item:first-child:after{transition:var(--ph-speccer-transition-default);font-family:var(--ph-speccer-font-family);font-size:16px;position:absolute;background-color:var(--ph-speccer-base-color);display:flex;justify-content:center;align-items:center;color:var(--ph-speccer-color-text-light);border-top-left-radius:50%}.ph-speccer.speccer.speccer-grid-row-item:first-child:after{counter-increment:row-gap;content:counter(row-gap);left:-32px;top:100%;width:32px;height:calc(var(--ph-speccer-grid-row-gap) + 2px);border-bottom-left-radius:50%}.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:before,.ph-speccer.speccer.speccer-grid-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-item:first-child:after{left:calc(100% - (var(--ph-speccer-grid-gap) - var(--ph-speccer-grid-gap-original))/2)}.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:before,.ph-speccer.speccer.speccer-grid-row-container.speccer-small-grid .ph-speccer.speccer.speccer-grid-row-item:first-child:after{top:calc(100% - (var(--ph-speccer-grid-row-gap) - var(--ph-speccer-grid-row-gap-original))/2)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:first-child:before{position:absolute;top:-32px;right:auto;left:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:first-child:before{position:absolute;left:-32px;bottom:auto;top:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-container .ph-speccer.speccer.speccer-grid-item:last-child:before{position:absolute;top:-32px;left:auto;right:calc((var(--ph-speccer-grid-gap) + 2px)/2*-1)}.ph-speccer.speccer.speccer-grid-row-container .ph-speccer.speccer.speccer-grid-row-item:last-child:before{position:absolute;left:-32px;top:auto;bottom:calc((var(--ph-speccer-grid-row-gap) + 2px)/2*-1)}.ph-speccer.speccer.spacing{pointer-events:none;transition:none;white-space:nowrap}.ph-speccer.speccer.spacing.padding{background-color:var(--ph-speccer-spacing-padding-color-background);color:var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding:after,.ph-speccer.speccer.spacing.padding:before{transition:none;content:"";position:absolute}.ph-speccer.speccer.spacing.padding.bottom,.ph-speccer.speccer.spacing.padding.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.padding.bottom:after,.ph-speccer.speccer.spacing.padding.top:after{left:calc(6ch - 5px);height:100%;width:10px;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding.bottom:before,.ph-speccer.speccer.spacing.padding.top:before{left:6ch;height:100%;border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);width:0}.ph-speccer.speccer.spacing.padding.left,.ph-speccer.speccer.spacing.padding.right{display:flex;justify-content:flex-end;flex-direction:column;padding-bottom:4px}.ph-speccer.speccer.spacing.padding.left:after,.ph-speccer.speccer.spacing.padding.right:after{top:calc(100% - 34px);height:10px;width:100%;border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color)}.ph-speccer.speccer.spacing.padding.left:before,.ph-speccer.speccer.spacing.padding.right:before{top:calc(100% - 29px);height:0;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-padding-color);width:100%}.ph-speccer.speccer.spacing.margin{background-color:var(--ph-speccer-spacing-margin-color-background);color:var(--ph-speccer-spacing-margin-color)}.ph-speccer.speccer.spacing.margin.bottom,.ph-speccer.speccer.spacing.margin.top{display:flex;justify-content:flex-start;padding-left:4px}.ph-speccer.speccer.spacing.margin.left,.ph-speccer.speccer.spacing.margin.right{display:flex;justify-content:flex-end;flex-direction:column;padding-bottom:4px}.ph-speccer.speccer.spacing.margin:after,.ph-speccer.speccer.spacing.margin:before{transition:none;content:"";position:absolute}.ph-speccer.speccer.spacing.margin.bottom:after,.ph-speccer.speccer.spacing.margin.top:after{left:calc(6ch - 5px);height:100%;width:10px;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-bottom:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color)}.ph-speccer.speccer.spacing.margin.bottom:before,.ph-speccer.speccer.spacing.margin.top:before{left:6ch;height:100%;border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);width:0}.ph-speccer.speccer.spacing.margin.left:after,.ph-speccer.speccer.spacing.margin.right:after{height:10px;border-right:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);border-left:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);width:100%;top:calc(100% - 34px)}.ph-speccer.speccer.spacing.margin.left:before,.ph-speccer.speccer.spacing.margin.right:before{height:0;border-top:var(--ph-speccer-spacing-line-width) solid var(--ph-speccer-spacing-margin-color);width:100%;top:calc(100% - 29px)}.ph-speccer.speccer.spacing.bound.margin.bottom,.ph-speccer.speccer.spacing.bound.margin.left,.ph-speccer.speccer.spacing.bound.margin.right,.ph-speccer.speccer.spacing.bound.margin.top,.ph-speccer.speccer.spacing.bound.padding.bottom,.ph-speccer.speccer.spacing.bound.padding.left,.ph-speccer.speccer.spacing.bound.padding.right,.ph-speccer.speccer.spacing.bound.padding.top{justify-content:center;align-items:center;padding:0}.ph-speccer.speccer.measure{display:flex}.ph-speccer.speccer.measure.height{color:var(--ph-speccer-measure-color);border-top:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-bottom:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style)}.ph-speccer.speccer.measure.height.left:before{content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;left:59px;width:10px;border-top:var(--ph-speccer-measure-line-width) solid;border-bottom:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.height.left:after{position:static;content:attr(data-measure);display:flex;width:64px;height:100%;line-height:100%;margin-right:auto;border-right:var(--ph-speccer-measure-line-width) solid;justify-content:flex-end;padding-right:8px}.ph-speccer.speccer.measure.height.right:before{content:"";display:block;height:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;left:calc(100% - 69px);width:10px;border-top:var(--ph-speccer-measure-line-width) solid;border-bottom:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.height.right:after{position:static;content:attr(data-measure);display:flex;width:64px;height:100%;line-height:100%;margin-left:auto;border-left:var(--ph-speccer-measure-line-width) solid;justify-content:flex-start;padding-left:8px}.ph-speccer.speccer.measure.width{flex-direction:column;align-items:center;justify-content:flex-start;color:var(--ph-speccer-measure-color);border-left:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style);border-right:var(--ph-speccer-measure-line-width) var(--ph-speccer-measure-border-style)}.ph-speccer.speccer.measure.width.top:before{content:"";display:block;width:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;top:31px;height:10px;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.width.top:after{position:static;content:attr(data-measure);display:flex;flex-direction:column;height:36px;width:100%;line-height:18px;margin-bottom:auto;border-bottom:var(--ph-speccer-measure-line-width) solid;justify-content:flex-end;padding-bottom:4px}.ph-speccer.speccer.measure.width.bottom:before{content:"";display:block;width:calc(100% + var(--ph-speccer-measure-line-width));background:#0000;position:absolute;top:calc(100% - 41px);height:10px;border-left:var(--ph-speccer-measure-line-width) solid;border-right:var(--ph-speccer-measure-line-width) solid}.ph-speccer.speccer.measure.width.bottom:after{position:static;content:attr(data-measure);display:flex;height:36px;width:100%;line-height:18px;margin-top:auto;flex-direction:column;border-top:var(--ph-speccer-measure-line-width) solid;justify-content:flex-start;padding-top:4px}.ph-speccer.speccer.measure.slim.height{width:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.height:before{content:none}.ph-speccer.speccer.measure.slim.height.left{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-right:none}.ph-speccer.speccer.measure.slim.height.right{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-left:none}.ph-speccer.speccer.measure.slim.height.left:after{position:absolute;top:50%;width:auto;height:auto;margin:0;white-space:nowrap;padding:0;border:none;left:calc(-100% - 20px - var(--ph-speccer-line-width));transform:translateY(-50%) rotate(-90deg)}.ph-speccer.speccer.measure.slim.height.right:after{position:absolute;width:auto;height:auto;border:none;padding:0;margin:0;top:50%;white-space:nowrap;left:calc(100% - var(--ph-speccer-measure-size));transform:translateY(-50%) rotate(90deg)}.ph-speccer.speccer.measure.slim.width{height:var(--ph-speccer-measure-size)}.ph-speccer.speccer.measure.slim.width:before{content:none}.ph-speccer.speccer.measure.slim.width.bottom{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-top:none}.ph-speccer.speccer.measure.slim.width.top{color:var(--ph-speccer-measure-color);border:var(--ph-speccer-measure-line-width) solid var(--ph-speccer-measure-color);border-bottom:none}.ph-speccer.speccer.measure.slim.width.top:after{position:absolute;bottom:calc(100% + 5px);padding:0;border:none;height:auto}.ph-speccer.speccer.measure.slim.width.bottom:after{position:absolute;top:calc(100% + 5px);padding:0;border:none;height:auto}.ph-speccer.speccer.measure.slim.subtle.height.left,.ph-speccer.speccer.measure.slim.subtle.height.right,.ph-speccer.speccer.measure.slim.subtle.width.bottom,.ph-speccer.speccer.measure.slim.subtle.width.top{border-style:dashed}.ph-speccer.speccer.measure.slim.subtle.width.top{border-bottom:none}.ph-speccer.speccer.measure.slim.subtle.width.bottom{border-top:none}.ph-speccer.speccer.measure.slim.subtle.height.right{border-left:none}.ph-speccer.speccer.measure.slim.subtle.height.left{border-right:none}.ph-speccer.speccer.mark{background-color:var(--ph-speccer-mark-background-color);border-color:var(--ph-speccer-mark-border-color);border-width:var(--ph-speccer-mark-border-width);border-style:var(--ph-speccer-mark-border-style);position:absolute}