:root{--xbase:#fdf2f4;--xcard:#ffffff;--xtype:#301018;--xsoft:#77545d;--xbrand:#be123c;--xsecond:#0f766e;--xedge:#f2d9de;--xcorner:10px;--xpage:1200px;--xfont-head:'Bricolage Grotesque',system-ui,sans-serif;--xbody:'DM Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--xbase);color:var(--xtype);font:16px/1.78 var(--xbody)}
img{max-width:100%;height:auto} a{color:var(--xbrand);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--xfont-head);line-height:1.2;letter-spacing:-.01em;color:var(--xtype)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.pg-column{max-width:var(--xpage);margin:0 auto;padding:0 1rem} .pg-main-col{max-width:var(--xpage);margin:0 auto;padding:1.2rem 1rem 3rem}
.pg-jump{position:absolute;left:-9999px} .pg-jump:focus{left:1rem;top:1rem;background:var(--xcard);padding:.5rem;z-index:99}
.pg-top__in{max-width:var(--xpage);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.pg-identity{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--xfont-head);color:var(--xtype);text-decoration:none}
.pg-menu{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .pg-menu a{color:var(--xtype);text-decoration:none;font-weight:600;font-size:.95rem}
.pg-banner{background:transparent;padding-top:.8rem} .pg-top__in{background:var(--xcard);border:1px solid var(--xedge);border-radius:999px;padding:.5rem 1.1rem}  
.pg-title-block{margin:1rem 0 1.4rem} .pg-deck{font-size:1.12rem;max-width:46em;color:var(--xsoft)} .pg-title-block{background:var(--xcard);border:1px solid var(--xedge);padding:2rem 1.6rem;border-radius:var(--xcorner)}
.pg-tool-box{margin:1.4rem 0 2rem}
.pg-hint-box{margin:1.4em 0;padding:.9em 1.1em;background:var(--xcard);border-left:4px solid var(--xsecond);border-radius:0 var(--xcorner) var(--xcorner) 0}
.pg-expr{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--xcard);border:1px dashed var(--xbrand);border-radius:var(--xcorner);overflow-x:auto}
.pg-tbl-box{margin:1.2em 0;overflow-x:auto;border:1px solid var(--xedge);border-radius:var(--xcorner);background:var(--xcard)}
.pg-data-table{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .pg-data-table th,.pg-data-table td{padding:.5em .75em;border-bottom:1px solid var(--xedge);text-align:left}
.pg-data-table thead th{background:color-mix(in srgb,var(--xedge) 60%,var(--xcard))}
ol.pg-step-list{padding-left:1.3em} ol.pg-step-list>li{margin:.5em 0}
.pg-figure{margin:1.6em 0;text-align:center} .pg-figure img{width:100%;max-width:720px;border-radius:var(--xcorner);border:1px solid var(--xedge);background:#fff} .pg-figure figcaption{font-size:.9em;color:var(--xsoft)}
.pg-card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.pg-guide-card{display:block;padding:1.1rem;background:var(--xcard);border-radius:var(--xcorner);border:1px solid var(--xedge);color:var(--xtype);text-decoration:none}
.pg-guide-card b{display:block;font-family:var(--xfont-head);margin-bottom:.35rem} .pg-guide-card span{color:var(--xsoft);font-size:.92rem} .pg-guide-card:hover{border-color:var(--xbrand)}
.pg-guide-card--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .pg-guide-card--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--xtype) 14%,transparent)}
.pg-item__img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .pg-link-card__txt{display:block;padding:1rem 1.1rem 1.1rem} .pg-link-card__txt>span{display:block}
.pg-blist a,.pg-brow,.pg-post__kicker{background:none!important}
.pg-read__meta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--xbrand)}
.pg-card-list--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .pg-card-list--feat>.pg-guide-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .pg-card-list--feat>.pg-guide-card:first-child b{font-size:1.35rem}
.pg-blist{display:grid;gap:1rem;margin:1.2em 0} .pg-brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--xcard);border:1px solid var(--xedge);border-radius:var(--xcorner);overflow:hidden;color:var(--xtype);text-decoration:none}
.pg-brow .pg-item__img{height:100%;aspect-ratio:auto;min-height:126px} .pg-brow b{display:block;font-family:var(--xfont-head);font-size:1.12rem;margin-bottom:.3rem} .pg-brow .pg-link-card__txt>span{color:var(--xsoft);font-size:.93rem} .pg-brow:hover{border-color:var(--xbrand)}
.pg-blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .pg-blist--min li{counter-increment:bl;border-top:1px solid var(--xedge)} .pg-blist--min li:last-child{border-bottom:1px solid var(--xedge)}
.pg-blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--xtype);text-decoration:none} .pg-blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--xfont-head);color:var(--xbrand)}
.pg-blist--min b{font-family:var(--xfont-head);font-size:1.15rem} .pg-blist--min span{color:var(--xsoft);font-size:.93rem} .pg-blist--min a:hover b{color:var(--xbrand)}
.pg-post__head--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--xcorner);overflow:hidden} .pg-post__head--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.pg-post__ov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .pg-post__ov h1,.pg-post__ov .pg-post__meta,.pg-post__ov .pg-post__kicker{color:#fff}
.pg-post__head--band{background:var(--xbrand);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--xcorner)} .pg-post__head--band h1,.pg-post__head--band .pg-post__meta,.pg-post__head--band .pg-post__kicker{color:#fff}
.pg-post__head--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .pg-post__head--split .pg-post__cover{margin:0}
.pg-contents--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .pg-contents--chips li{margin:0} .pg-contents--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--xedge);border-radius:999px;background:var(--xbase);text-decoration:none;font-size:.88rem}
.pg-contents--rail{background:none;border:0;border-left:3px solid var(--xsecond);border-radius:0;padding:.2rem 0 .2rem 1rem}
.pg-language--globe summary{display:flex;align-items:center;gap:.35rem} .pg-langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .pg-langpills a{padding:.25rem .7rem;border:1px solid var(--xedge);border-radius:999px;text-decoration:none} .pg-langpills a[aria-current]{background:var(--xbrand);border-color:var(--xbrand);color:#fff}
@media (max-width:700px){.pg-card-list--feat{grid-template-columns:1fr} .pg-card-list--feat>.pg-guide-card:first-child{display:flex} .pg-brow{grid-template-columns:1fr} .pg-brow .pg-item__img{min-height:0;aspect-ratio:1200/630} .pg-post__head--split{grid-template-columns:1fr} .pg-post__ov{position:static;background:var(--xbrand);padding:1.2rem} .pg-post__head--overlay>img{min-height:0}}
.pg-post{max-width:48rem;margin:0 auto} .pg-post__head{margin:.6rem 0 1.2rem} .pg-post__head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.pg-post__kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--xbrand);text-decoration:none}
.pg-upd{color:var(--xsoft);font-size:.9rem;margin:2rem 0 0} .pg-sign{font-style:italic;color:var(--xsoft)} .pg-post__meta{color:var(--xsoft);font-size:.92rem;margin:0} .pg-post__cover{margin:0 0 1.6rem} .pg-post__cover img{display:block;width:100%;height:auto;border-radius:var(--xcorner)}
.pg-post .pg-deck{font-size:1.2rem;color:var(--xtype)} .pg-post .pg-deck::first-letter{font-family:var(--xfont-head);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--xbrand)}
.pg-post .pg-contents--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--xcard);border:1px solid var(--xedge);border-left:4px solid var(--xbrand);border-radius:var(--xcorner);font-size:.95rem}
.pg-contents--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .pg-contents--post li{margin:.2rem 0}
.pg-post h3{color:var(--xbrand)} .pg-post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--xsecond);font-size:1.1em}
.pg-faq-list h3{font-size:1.05rem;margin-top:1.3em}
.pg-breadcrumbs{font-size:.88rem;color:var(--xsoft);margin:.4rem 0 1rem} .pg-breadcrumbs a{color:var(--xsoft)}
.pg-next-step{margin:2.4rem 0;padding:1.4rem;background:var(--xcard);border-radius:var(--xcorner);border:1px solid var(--xedge);text-align:center}
.pg-go{display:inline-block;padding:.7em 1.4em;background:var(--xbrand);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.pg-bottom{border-top:1px solid var(--xedge);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--xsoft);background:var(--xcard)}
.pg-bottom nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .pg-bottom a{color:var(--xsoft)} .pg-colophon__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}

.pg-contents{margin:1.2rem 0;padding:.8rem 1rem;background:var(--xcard);border-radius:var(--xcorner);border:1px solid var(--xedge)} .pg-contents ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem} @media(max-width:640px){.pg-contents ol{columns:1}}
.pg-language{position:relative} .pg-language summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--xedge);border-radius:999px;font-size:.85rem}
.pg-i18n__list{position:absolute;right:0;top:120%;background:var(--xcard);border:1px solid var(--xedge);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.pg-i18n__list a{padding:.3rem .5rem;text-decoration:none;color:var(--xtype)} .pg-i18n__list a[aria-current]{font-weight:700;color:var(--xbrand)}
.pg-codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .pg-codes a{text-decoration:none;color:var(--xsoft);padding:.1rem .3rem;border-radius:4px} .pg-codes a[aria-current]{color:var(--xbrand);background:color-mix(in srgb,var(--xbrand) 12%,transparent)}
[data-spot]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-spot]:empty{margin:0}
[data-spot="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--xcard)}
[data-spot="sidebar_left"],[data-spot="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-spot="sidebar_left"]{left:12px} [data-spot="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-spot="sidebar_left"],[data-spot="sidebar_right"]{display:none}}
.pg-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--xsoft)}
.pg-go{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.pg-tbl-box{border:0;border-top:3px solid var(--xbrand);border-radius:0;background:transparent} .pg-data-table thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.pg-part a:not(.pg-go):not(.pg-guide-card){text-decoration-thickness:2px}
@media (max-width:640px){.pg-top__in{gap:.5rem} .pg-menu{gap:.8rem}}

/* Signature generator — tool styles. Colours, radius and fonts come only from the site tokens;
   the signing surfaces ("paper") stay light in any theme so dark ink is always visible. */
.sg-wrap {
    --sg-paper: color-mix(in srgb, var(--xcard) 5%, #fffdf8);
    --sg-paper-ink: color-mix(in srgb, var(--xtype) 25%, #3a3236);
    --sg-paper-line: color-mix(in srgb, var(--xbrand) 30%, #b9aeb2);
    --sg-ink: #000000;
    --sg-soft: color-mix(in srgb, var(--xbrand) 8%, var(--xcard));
    position: relative;
    color: var(--xtype);
    font-family: var(--xbody);
    color-scheme: inherit;
    outline: none;
}
.sg-wrap *, .sg-wrap *::before, .sg-wrap *::after { box-sizing: border-box; }
.sg-wrap [hidden] { display: none !important; }
.sg-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.sg-wrap svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-wrap button { font: inherit; color: inherit; cursor: pointer; }
.sg-wrap button:disabled { cursor: not-allowed; opacity: .45; }
.sg-wrap :focus-visible { outline: 2px solid var(--xsecond); outline-offset: 2px; }

/* ---------- tabs ---------- */
.sg-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--xedge); border-radius: calc(var(--xcorner) + 6px); background: var(--xcard); margin-bottom: 1rem; }
.sg-tab { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent; padding: .55rem 1.15rem; border-radius: calc(var(--xcorner) + 3px); font-family: var(--xfont-head); font-weight: 600; font-size: 1rem; color: var(--xsoft); min-height: 44px; transition: background .2s, color .2s; }
.sg-tab svg { width: 20px; height: 20px; }
.sg-tab[aria-selected="true"] { background: var(--xbrand); color: var(--xbase); }
.sg-tab:not([aria-selected="true"]):hover { color: var(--xtype); background: var(--sg-soft); }

/* ---------- common bits ---------- */
.sg-lbl { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--xsoft); margin-bottom: .35rem; }
.sg-lbl b { color: var(--xtype); font-weight: 700; text-transform: none; letter-spacing: 0; margin-left: .25rem; }
.sg-row { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: flex-end; }
.sg-grp { min-width: 0; }
.sg-seg { display: inline-flex; border: 1px solid var(--xedge); border-radius: calc(var(--xcorner) + 4px); overflow: hidden; background: var(--xbase); }
.sg-segb { border: 0; background: transparent; padding: .45rem .85rem; min-height: 38px; font-size: .9rem; color: var(--xsoft); }
.sg-segb + .sg-segb { border-left: 1px solid var(--xedge); }
.sg-segb[aria-checked="true"] { background: var(--xtype); color: var(--xbase); font-weight: 600; }
.sg-range { --sg-pct: 50%; -webkit-appearance: none; appearance: none; width: 200px; max-width: 100%; height: 6px; border-radius: 3px; margin: .7rem 0; background: linear-gradient(90deg, var(--xbrand) var(--sg-pct), var(--xedge) var(--sg-pct)); }
.sg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--xcard); border: 3px solid var(--xbrand); box-shadow: 0 1px 3px color-mix(in srgb, var(--xtype) 25%, transparent); }
.sg-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--xcard); border: 3px solid var(--xbrand); }
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: var(--xcorner); border: 1px solid var(--xedge); background: var(--xcard); font-weight: 600; font-size: .95rem; transition: transform .15s, background .2s, border-color .2s; }
.sg-btn svg { width: 19px; height: 19px; flex: none; }
.sg-btn:not(:disabled):hover { border-color: var(--xbrand); transform: translateY(-1px); }
.sg-btn-p { background: var(--xbrand); border-color: var(--xbrand); color: var(--xbase); }
.sg-btn-p:not(:disabled):hover { background: color-mix(in srgb, var(--xbrand) 85%, var(--xtype)); }
.sg-btn-q { min-height: 40px; padding: .4rem .8rem; font-size: .9rem; }

/* ---------- type: name ---------- */
.sg-namebox { margin-bottom: 1rem; }
.sg-name { width: 100%; font: 500 1.35rem/1.3 var(--xfont-head); color: var(--xtype); background: var(--xcard); border: 1px solid var(--xedge); border-bottom: 2px solid var(--xbrand); border-radius: var(--xcorner) var(--xcorner) 0 0; padding: .75rem 1rem; }
.sg-name::placeholder { color: var(--xsoft); opacity: .7; }
.sg-name:focus { outline: none; border-color: var(--xbrand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xbrand) 18%, transparent); }
.sg-row-type { margin-bottom: 1.25rem; }

/* ---------- draw: pad ---------- */
.sg-padbox { position: relative; border-radius: var(--xcorner); background: var(--sg-paper); border: 1px solid var(--xedge); box-shadow: 0 1px 0 var(--xedge), 0 10px 26px -18px color-mix(in srgb, var(--xtype) 45%, transparent); overflow: hidden; touch-action: none; }
.sg-wrap.sg-white .sg-padbox { background: #ffffff; }
.sg-pad { display: block; width: 100%; height: 240px; touch-action: none; cursor: crosshair; position: relative; z-index: 1; }
.sg-guide { position: absolute; left: 6%; right: 6%; top: 70%; display: flex; align-items: center; gap: .4rem; pointer-events: none; color: var(--sg-paper-line); }
.sg-guide-x { font: 600 1.4rem/1 var(--xfont-head); transform: translateY(-.55rem); }
.sg-guide-l { flex: 1; border-top: 2px dashed currentColor; opacity: .8; }
.sg-padhint { position: absolute; left: 0; right: 0; top: 34%; margin: 0; text-align: center; color: var(--sg-paper-ink); opacity: .55; font: italic 1.05rem var(--xbody); pointer-events: none; transition: opacity .3s; }
.sg-padbox.sg-has .sg-padhint, .sg-padbox.sg-on .sg-padhint { opacity: 0; }
.sg-padbox.sg-on { border-color: var(--xbrand); }
.sg-row-draw { justify-content: space-between; margin: .9rem 0 1.25rem; }
.sg-tools { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- shared panel ---------- */
.sg-panel { border: 1px solid var(--xedge); border-radius: var(--xcorner); background: var(--xcard); padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.25rem; display: grid; gap: 1.1rem; }
.sg-colors { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.sg-c { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--xcard); background: var(--sg-sw, #000); box-shadow: 0 0 0 1px var(--xedge); padding: 0; transition: transform .15s, box-shadow .15s; }
.sg-c[aria-checked="true"] { box-shadow: 0 0 0 2px var(--xbrand); transform: scale(1.08); }
.sg-cc { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--xedge); background: conic-gradient(from 90deg, #c0392b, #d4a017, #2a7a3a, #1f3fae, #6b2737, #c0392b); cursor: pointer; }
.sg-ci { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.sg-cc:focus-within { outline: 2px solid var(--xsecond); outline-offset: 2px; }
.sg-out { border-top: 1px dashed var(--xedge); padding-top: 1rem; }
.sg-out-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .55rem; }
.sg-out-h .sg-lbl { margin: 0; }
.sg-unitseg .sg-segb { padding: .3rem .75rem; min-height: 34px; }
.sg-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.sg-pre { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; border: 1px solid var(--xedge); border-radius: var(--xcorner); background: var(--xbase); padding: .55rem .75rem; min-height: 52px; transition: border-color .2s, background .2s; }
.sg-pre b { font-size: .92rem; font-weight: 600; }
.sg-pre small { font-size: .8rem; color: var(--xsoft); font-variant-numeric: tabular-nums; }
.sg-pre:hover { border-color: var(--xbrand); }
.sg-pre[aria-checked="true"] { border-color: var(--xbrand); background: color-mix(in srgb, var(--xbrand) 10%, var(--xbase)); box-shadow: inset 0 -3px 0 var(--xbrand); }
.sg-pre[data-p="email"][aria-checked="true"] { border-color: var(--xsecond); background: color-mix(in srgb, var(--xsecond) 10%, var(--xbase)); box-shadow: inset 0 -3px 0 var(--xsecond); }
.sg-custom { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.sg-custom .sg-lbl { margin: 0 .25rem 0 0; }
.sg-cw { width: 6.5rem; font: inherit; font-size: 1rem; padding: .45rem .6rem; border: 1px solid var(--xedge); border-radius: var(--xcorner); background: var(--xbase); color: var(--xtype); }
.sg-res-row { display: flex; align-items: center; gap: 1rem; margin-top: .85rem; }
.sg-dia { flex: none; width: 150px; height: 40px; }
.sg-dia-p { fill: var(--sg-paper); stroke: var(--xedge); stroke-width: 1; }
.sg-dia-l { stroke: var(--xbrand); stroke-width: 2; stroke-dasharray: 3 3; transition: d .3s; }
.sg-dia-x { stroke: var(--xbrand); stroke-width: 1.6; }
.sg-dia-r { stroke: var(--xsecond); stroke-width: 1.2; }
.sg-dia-m { fill: none; stroke: var(--xsecond); stroke-width: 1.6; stroke-dasharray: 4 3; }
.sg-res { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sg-emailhint { margin: .6rem 0 0; font-size: .88rem; color: var(--xsoft); border-left: 3px solid var(--xsecond); padding-left: .6rem; }

/* ---------- type: font cards ---------- */
.sg-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.sg-cat { border: 1px solid var(--xedge); background: var(--xcard); border-radius: 999px; padding: .4rem .95rem; min-height: 38px; font-size: .9rem; }
.sg-cat[aria-pressed="true"] { background: var(--xtype); border-color: var(--xtype); color: var(--xbase); }
.sg-gridhint { margin: .25rem 0 .8rem; font-size: .9rem; color: var(--xsoft); }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; }
.sg-card { display: flex; flex-direction: column; border: 1px solid var(--xedge); border-radius: var(--xcorner); background: var(--xcard); overflow: hidden; transition: box-shadow .2s, transform .2s; min-width: 0; }
.sg-card:hover { box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--xtype) 55%, transparent); transform: translateY(-2px); }
.sg-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .55rem .8rem; border-bottom: 1px solid var(--xedge); }
.sg-card-n { font-weight: 600; font-size: .9rem; }
.sg-card-g { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--xsecond); }
.sg-sheet { position: relative; background: var(--sg-paper); min-height: 128px; padding: 1.2rem 1rem 1.6rem 2.1rem; display: flex; align-items: flex-end; overflow: hidden; }
.sg-wrap:not(.sg-white) .sg-sheet { background-color: var(--sg-paper); background-image: conic-gradient(rgba(0,0,0,.035) 25%, transparent 0 50%, rgba(0,0,0,.035) 0 75%, transparent 0); background-size: 14px 14px; }
.sg-wrap.sg-white .sg-sheet { background: #ffffff; }
.sg-sheet-x { position: absolute; left: .75rem; bottom: 1.05rem; font: 600 1.05rem/1 var(--xfont-head); color: var(--sg-paper-line); }
.sg-sheet-l { position: absolute; left: 2rem; right: 1rem; bottom: 1.1rem; border-top: 1.5px dotted var(--sg-paper-line); }
.sg-sig { position: relative; z-index: 1; color: var(--sg-ink); line-height: 1.25; padding: 0 .2rem .1rem; overflow-wrap: anywhere; max-width: 100%; transition: font-size .2s; }
.sg-sig.sg-sample { opacity: .28; }
.sg-card.sg-loading .sg-sig { opacity: .15; }
.sg-miss { margin: 0; padding: .35rem .8rem; font-size: .8rem; color: var(--xbrand); background: color-mix(in srgb, var(--xbrand) 8%, var(--xcard)); border-top: 1px solid var(--xedge); }
.sg-card-a { display: flex; gap: .4rem; padding: .55rem .6rem; border-top: 1px solid var(--xedge); margin-top: auto; }
.sg-cb { flex: 1 1 auto; min-height: 40px; border: 1px solid var(--xedge); border-radius: var(--xcorner); background: var(--xbase); font-size: .88rem; font-weight: 600; padding: .3rem .6rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.sg-cb-png { background: var(--xbrand); border-color: var(--xbrand); color: var(--xbase); }
.sg-cb:not(:disabled):hover { border-color: var(--xbrand); }
.sg-cb-ini { flex: 1.3 1 auto; }
.sg-ini-t { font-size: 1.25rem; line-height: 1; color: var(--sg-ink); background: var(--sg-paper); border-radius: calc(var(--xcorner) + 2px); padding: .15rem .4rem; font-weight: 400; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-ini-l { font-size: .82rem; }

/* ---------- draw: export ---------- */
.sg-acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }

/* ---------- notes, history ---------- */
.sg-notes { margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .88rem; color: var(--xsoft); }
.sg-notes li { position: relative; padding-left: 1.1rem; }
.sg-notes li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--xsecond); }
.sg-hist { border: 1px solid var(--xedge); border-radius: var(--xcorner); background: var(--xcard); }
.sg-hist summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; list-style-position: inside; }
.sg-hc { color: var(--xsoft); font-weight: 400; }
.sg-hist-b { padding: 0 1rem 1rem; display: grid; gap: .6rem; }
.sg-rem { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }
.sg-rem input { width: 18px; height: 18px; accent-color: var(--xbrand); }
.sg-remnote, .sg-hst { margin: 0; font-size: .82rem; color: var(--xsoft); }
.sg-hg { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.sg-hg .sg-hst { flex-basis: 100%; }
.sg-hi { position: relative; }
.sg-hi-b { display: flex; flex-direction: column; gap: .25rem; align-items: center; border: 1px solid var(--xedge); border-radius: var(--xcorner); background: var(--sg-paper); padding: .4rem; width: 150px; }
.sg-hi-b img { max-width: 100%; height: 48px; object-fit: contain; }
.sg-hi-b span { font-size: .7rem; color: var(--sg-paper-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-hi-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--xedge); background: var(--xcard); font-size: 1rem; line-height: 1; padding: 0; }
.sg-hx { justify-self: start; }

/* ---------- help ---------- */
.sg-qm { position: absolute; top: 0; right: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--xedge); background: var(--xcard); font-weight: 700; color: var(--xsoft); }
.sg-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sg-modal-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--xtype) 45%, transparent); }
.sg-modal-bx { position: relative; background: var(--xcard); color: var(--xtype); border-radius: var(--xcorner); border: 1px solid var(--xedge); padding: 1.25rem 1.4rem; width: min(380px, 100%); }
.sg-modal-bx h3 { margin: 0 0 .8rem; font-family: var(--xfont-head); }
.sg-modal-bx table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 1rem; }
.sg-modal-bx td { padding: .35rem .2rem; border-bottom: 1px solid var(--xedge); }
.sg-modal-bx kbd { font-family: var(--xbody); font-size: .8rem; border: 1px solid var(--xedge); border-bottom-width: 2px; border-radius: 4px; padding: .1rem .35rem; background: var(--xbase); white-space: nowrap; }
.sg-modal-x { width: 100%; }

/* ---------- toast ---------- */
.sg-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1001; max-width: calc(100% - 2rem); background: var(--xtype); color: var(--xbase); border-radius: var(--xcorner); padding: .7rem 1.1rem; font-weight: 600; font-size: .95rem; box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--xtype) 60%, transparent); animation: sg-in .25s ease-out; transition: opacity .35s; }
.sg-toast-err { background: var(--xbrand); }
.sg-toast.sg-bye { opacity: 0; }
@keyframes sg-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
    .sg-tabs { display: flex; margin-right: 44px; }
    .sg-tab { flex: 1; justify-content: center; }
    .sg-range { width: 100%; }
    .sg-row .sg-grp { flex: 1 1 100%; }
    .sg-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-res-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .sg-acts .sg-btn { flex: 1 1 100%; }
    .sg-panel { padding: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sg-wrap *, .sg-toast { transition: none !important; animation: none !important; }
}

/* design: sites/<d>/design/site.css */
/* Contract execution page on an oxblood leather blotter — generator-signature.com */
:root{--sg-leather:var(--xtype);--sg-tool:color-mix(in srgb,var(--xbase) 26%,transparent);--sg-tool2:color-mix(in srgb,var(--xbase) 14%,transparent);--sg-rule:color-mix(in srgb,var(--xtype) 22%,var(--xedge));--sg-dot:color-mix(in srgb,var(--xtype) 48%,transparent);--sg-sheet:0 1px 0 var(--xedge),0 18px 34px -26px color-mix(in srgb,var(--xtype) 42%,transparent)}
body{background-color:var(--xbase);background-image:repeating-linear-gradient(90deg,transparent 0 71px,color-mix(in srgb,var(--xedge) 55%,transparent) 71px 72px)}
::selection{background:color-mix(in srgb,var(--xbrand) 20%,transparent)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--xbrand);outline-offset:2px}

/* ---------- header: the leather blotter, blind-tooled ---------- */
.pg-banner{background-color:var(--sg-leather);background-image:radial-gradient(120% 140% at 15% 0,color-mix(in srgb,var(--xbrand) 16%,transparent),transparent 60%);border-bottom:0;padding-top:0;
  box-shadow:inset 0 5px 0 var(--sg-leather),inset 0 6px 0 var(--sg-tool),inset 0 9px 0 var(--sg-leather),inset 0 10px 0 var(--sg-tool2),inset 0 -5px 0 var(--sg-leather),inset 0 -6px 0 var(--sg-tool),inset 0 -9px 0 var(--sg-leather),inset 0 -10px 0 var(--sg-tool2)}
.pg-top__in{background:transparent;border:0;border-radius:0;padding:1.05rem 1rem}
.pg-identity{color:var(--xbase);font-weight:700;letter-spacing:-.005em}
.pg-identity svg{flex:none;background:var(--xbrand);border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--xbrand) 45%,var(--xtype)),0 2px 6px color-mix(in srgb,#000 40%,transparent)}
.pg-identity svg rect,.pg-identity svg path{stroke:var(--xcard)}
.pg-menu{gap:1.3rem}
.pg-menu>a{color:color-mix(in srgb,var(--xbase) 86%,var(--xtype));font-family:var(--xfont-head);font-weight:600;padding:.2rem 0;border-bottom:1px dashed transparent;transition:color .15s,border-color .15s}
.pg-menu>a:hover{color:var(--xcard);border-bottom-color:var(--sg-tool)}
.pg-menu>a[aria-current]{color:var(--xcard);border-bottom:1px dashed color-mix(in srgb,var(--xcard) 70%,transparent)}
.pg-banner .pg-language summary{background:var(--xbase);color:var(--xtype);border:0;border-radius:2px;font:600 .8rem/1 var(--xfont-head);letter-spacing:.03em;padding:.42rem .7rem .42rem 1.45rem;position:relative;box-shadow:2px 2px 0 color-mix(in srgb,#000 30%,transparent)}
.pg-banner .pg-language summary::before{content:'';position:absolute;left:.5rem;top:50%;width:.48rem;height:.48rem;margin-top:-.24rem;border-radius:50%;border:1.5px solid var(--xbrand)}
.pg-banner .pg-language[open] summary::before{background:var(--xbrand)}
.pg-i18n__list{border-radius:2px;border-top:3px double var(--xbrand);box-shadow:0 14px 28px -14px color-mix(in srgb,var(--xtype) 55%,transparent);min-width:10rem}
.pg-banner .pg-i18n__list a{color:var(--xtype);padding:.4rem .6rem;border-bottom:1px dotted var(--xedge);font-size:.92rem}
.pg-banner .pg-i18n__list a:last-child{border-bottom:0}
.pg-banner .pg-i18n__list a:hover{background:var(--xbase)}
.pg-banner .pg-i18n__list a[aria-current]{color:var(--xbrand)}

/* ---------- breadcrumbs: the document reference line ---------- */
.pg-breadcrumbs{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--xsoft);margin:.9rem 0 1.1rem}
.pg-breadcrumbs a{color:var(--xsoft);text-decoration-style:dotted}
.pg-breadcrumbs a:hover{color:var(--xbrand)}

/* ---------- first screen: a signature block with an embossed seal ---------- */
.pg-title-block{display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:2.4rem;align-items:center;margin:2.2rem 0 1.8rem;padding:0;background:none;border:0}
.pg-title-block::after{content:'';width:172px;height:206px;background:url(/assets/img/d-seal.svg) center/contain no-repeat;transform:rotate(-7deg)}
.pg-title-block h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;margin-top:0}
.pg-title-block .pg-deck{color:var(--xsoft);max-width:40em}
.pg-title-block>div::after,.pg-main-col>h1::after,.pg-post__head h1::after{content:'';display:block;max-width:30rem;height:26px;margin-top:1.3rem;border-bottom:2px dotted var(--sg-dot);background:url(/assets/img/d-x.svg) 2px 2px/17px 17px no-repeat}
.pg-main-col>h1::after,.pg-post__head h1::after{max-width:15rem;margin-top:.8rem;height:22px;background-size:14px 14px}
@media (max-width:700px){
  .pg-title-block{grid-template-columns:minmax(0,1fr);gap:0;margin-top:1.4rem}
  .pg-title-block::after{width:84px;height:100px;justify-self:end;margin:-3.6rem .2rem 0 0}
  .pg-title-block>div::after{margin-right:96px}
}

/* ---------- the generator lies on the sheet under a sign-here flag ---------- */
.pg-tool-box{position:relative;background:var(--xcard);border:1px solid var(--xedge);border-radius:2px;padding:2.2rem 1.5rem 1.5rem;box-shadow:var(--sg-sheet)}
.pg-tool-box::before{content:'';position:absolute;top:-11px;right:1.4rem;width:64px;height:28px;background:url(/assets/img/d-flag.svg) center/contain no-repeat;filter:drop-shadow(0 2px 2px color-mix(in srgb,var(--xtype) 25%,transparent))}
@media (max-width:700px){.pg-tool-box{padding:1.8rem .7rem .9rem;margin-left:-.25rem;margin-right:-.25rem}}

/* ---------- contents list: the document index with dot leaders ---------- */
.pg-contents{background:var(--xcard);border:1px solid var(--xedge);border-radius:2px;padding:1.1rem 1.4rem 1.2rem;box-shadow:var(--sg-sheet)}
.pg-contents>strong{display:block;font:700 .76rem/1.2 var(--xbody);letter-spacing:.16em;text-transform:uppercase;color:var(--xbrand);padding-bottom:.55rem;border-bottom:3px double var(--sg-rule);margin-bottom:.5rem}
.pg-contents ol{list-style:none;padding:0;counter-reset:ix}
.pg-contents li{counter-increment:ix;display:flex;align-items:baseline;gap:.5rem;break-inside:avoid;margin:0;padding:.28rem 0}
.pg-contents li::before{content:'§ ' counter(ix);flex:none;min-width:2.1rem;font:700 .8rem var(--xfont-head);color:var(--xbrand);font-variant-numeric:tabular-nums}
.pg-contents li::after{content:'';flex:1 1 1.2rem;min-width:1.2rem;border-bottom:2px dotted color-mix(in srgb,var(--xtype) 22%,transparent);transform:translateY(-.25em)}
.pg-contents a{color:var(--xtype);text-decoration:none;background:none}
.pg-contents a:hover{color:var(--xbrand);text-decoration:underline;text-decoration-style:dotted}
.pg-post .pg-contents--post{border-left:1px solid var(--xedge);border-radius:2px;padding:1.1rem 1.4rem 1.2rem;box-shadow:var(--sg-sheet)}
.pg-contents--post ol{padding-left:0}

/* ---------- sections: numbered clauses under a double rule ---------- */
.pg-main-col{counter-reset:cl}
.pg-part>h2{counter-increment:cl;padding-top:1.4rem;border-top:3px double var(--sg-rule);margin-top:2.6em}
.pg-part>h2::before{content:'§ ' counter(cl);display:block;font:700 .8rem/1 var(--xbody);letter-spacing:.14em;color:var(--xbrand);margin-bottom:.6rem}
.pg-part h3{font-size:1.12rem}
.pg-part a:not(.pg-go):not(.pg-guide-card){text-decoration-color:color-mix(in srgb,var(--xbrand) 45%,transparent);text-decoration-thickness:1.5px}
.pg-part a:not(.pg-go):not(.pg-guide-card):hover{text-decoration-color:var(--xbrand)}
.pg-part ul{padding-left:1.2rem}
.pg-part ul>li::marker{content:'— ';color:var(--xbrand)}

/* steps: initialled clauses with a numbered initials box */
ol.pg-step-list{list-style:none;padding-left:0;counter-reset:st}
ol.pg-step-list>li{counter-increment:st;position:relative;padding-left:3.5rem;min-height:2.3rem;margin:.9em 0}
ol.pg-step-list>li::before{content:counter(st);position:absolute;left:0;top:.1em;width:2.5rem;height:1.95rem;padding:.1rem .3rem;border:1.5px solid var(--sg-rule);border-radius:1px;background:var(--xcard);font:700 .72rem/1 var(--xfont-head);color:var(--xbrand);box-shadow:inset 0 -6px 0 -4px color-mix(in srgb,var(--xtype) 10%,transparent)}

/* notes: a sign-here flag on a slip */
.pg-hint-box{position:relative;background:var(--xcard);border:1px solid var(--xedge);border-left:1px solid var(--xedge);border-radius:2px;padding:1em 1.2em 1em 4.6rem;box-shadow:var(--sg-sheet)}
.pg-hint-box::before{content:'';position:absolute;left:.85rem;top:1.05em;width:46px;height:20px;background:url(/assets/img/d-flag.svg) center/contain no-repeat;transform:scaleX(-1)}
.pg-hint-box>:last-child{margin-bottom:0}
@media (max-width:480px){.pg-hint-box{padding:2.6rem 1rem 1rem}.pg-hint-box::before{top:.75rem}}

/* formula: a typed rider on the margin */
.pg-expr{background:var(--xcard);border:1px solid var(--xedge);border-left:4px double var(--xbrand);border-radius:2px}

/* tables: the contract's schedule */
.pg-tbl-box{background:var(--xcard);border-top:3px solid var(--xbrand);border-bottom:3px double var(--sg-rule);border-radius:0;box-shadow:var(--sg-sheet)}
.pg-data-table caption{caption-side:top;text-align:left;padding:.7rem .75rem .5rem;font:600 .82rem var(--xbody);letter-spacing:.06em;text-transform:uppercase;color:var(--xsoft)}
.pg-data-table thead th{color:var(--xbrand);border-bottom:1px solid var(--sg-rule)}
.pg-data-table tbody tr:hover{background:color-mix(in srgb,var(--xbase) 70%,var(--xcard))}

/* figures: an exhibit pinned to the sheet */
.pg-figure img{border-radius:2px;box-shadow:var(--sg-sheet)}
.pg-figure figcaption{margin-top:.6rem;font-style:italic}

/* FAQ: questions with a margin rule */
.pg-faq-list h3{padding-left:.9rem;border-left:3px solid var(--xbrand);margin-top:1.6em}
.pg-faq-list h3+p{padding-left:calc(.9rem + 3px)}

/* ---------- guides: documents stacked in a folder ---------- */
.pg-blist{gap:1.5rem;padding-right:10px}
.pg-brow,.pg-guide-card{border-radius:2px;box-shadow:4px 4px 0 -1px var(--xcard),4px 4px 0 0 var(--xedge),8px 8px 0 -1px var(--xcard),8px 8px 0 0 var(--xedge)}
.pg-brow{border-top:3px solid var(--xbrand)}
.pg-blist .pg-brow{background-color:var(--xcard)!important}
.pg-brow b,.pg-guide-card b{font-weight:700}
.pg-brow:hover,.pg-guide-card:hover{border-color:var(--xbrand);border-top-color:var(--xbrand)}
@media (prefers-reduced-motion:no-preference){.pg-brow,.pg-guide-card{transition:transform .18s ease,border-color .18s ease}.pg-brow:hover,.pg-guide-card:hover{transform:translate(-2px,-2px)}}
.pg-blist--min{padding-right:0}
.pg-blist--min li{border-top:0}
.pg-blist--min li:last-child{border-bottom:3px double var(--sg-rule)}
.pg-blist--min a{border-top:1px solid var(--xedge)}
.pg-blist--min a::before{content:'§ ' counter(bl);font:700 1.1rem/1.4 var(--xfont-head)}

/* ---------- article ---------- */
.pg-post__kicker{letter-spacing:.16em}
.pg-post__head h1{margin-bottom:.2em}
.pg-post__meta{margin-top:.6rem;font-size:.85rem;letter-spacing:.04em}
.pg-post__cover img{border:1px solid var(--xedge);border-radius:2px;box-shadow:var(--sg-sheet)}
.pg-post .pg-deck::first-letter{font-weight:700}
.pg-post blockquote{border-left:4px double var(--xbrand);background:var(--xcard);padding:.8em 1.2em;font-style:italic;color:var(--xtype)}

/* ---------- call to action: the closing signature block ---------- */
.pg-next-step{background:var(--xcard);border:1px solid var(--xedge);border-radius:2px;text-align:left;padding:1.6rem 1.6rem 1.4rem;box-shadow:var(--sg-sheet)}
.pg-next-step::after{content:'';display:block;max-width:20rem;height:22px;margin-top:1.5rem;border-bottom:2px dotted var(--sg-dot);background:url(/assets/img/d-x.svg) 2px 2px/14px 14px no-repeat}
.pg-go{border-radius:2px;letter-spacing:.07em;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--xcard) 22%,transparent),0 3px 0 color-mix(in srgb,var(--xbrand) 50%,var(--xtype))}
.pg-go:hover{background:color-mix(in srgb,var(--xbrand) 86%,var(--xtype))}

/* ---------- footer: the lower edge of the blotter ---------- */
.pg-bottom{background-color:var(--sg-leather);background-image:radial-gradient(120% 160% at 85% 100%,color-mix(in srgb,var(--xbrand) 14%,transparent),transparent 60%);border-top:0;color:color-mix(in srgb,var(--xbase) 80%,var(--xtype));padding:2.2rem 0 2.6rem;
  box-shadow:inset 0 5px 0 var(--sg-leather),inset 0 6px 0 var(--sg-tool),inset 0 9px 0 var(--sg-leather),inset 0 10px 0 var(--sg-tool2)}
.pg-bottom a{color:color-mix(in srgb,var(--xbase) 90%,var(--xtype));text-decoration-style:dotted}
.pg-bottom a:hover{color:var(--xcard);text-decoration-style:solid}
.pg-bottom p{margin:0}