:root{--k-paper:#faf7f2;--k-surface:#ffffff;--k-fg:#22223b;--k-dim:#5f5f7a;--k-primary:#4a4e69;--k-hi:#c9184a;--k-rule:#e8e2d8;--k-corner:10px;--k-max:1080px;--k-heading:'Unbounded',system-ui,sans-serif;--k-body:'Onest',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(--k-paper);color:var(--k-fg);font:16px/1.65 var(--k-body)}
img{max-width:100%;height:auto} a{color:var(--k-primary);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(--k-heading);line-height:1.2;letter-spacing:-.01em;color:var(--k-fg)}
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.20em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
.uu-wra{max-width:var(--k-max);margin:0 auto;padding:0 1rem} .uu-mai{max-width:var(--k-max);margin:0 auto;padding:1.2rem 1rem 3rem}
.uu-ski{position:absolute;left:-9999px} .uu-ski:focus{left:1rem;top:1rem;background:var(--k-surface);padding:.5rem;z-index:99}
.uu-heain{max-width:var(--k-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.uu-bra{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--k-heading);color:var(--k-fg);text-decoration:none}
.uu-nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .uu-nav a{color:var(--k-fg);text-decoration:none;font-weight:600;font-size:.95rem}
.uu-hea{background:var(--k-primary)} .uu-hea a,.uu-hea .uu-bra,.uu-hea summary{color:#fff} .uu-hea .uu-lan summary{border-color:rgba(255,255,255,.5)} .uu-hea .uu-lanlis a{color:var(--k-fg)} .uu-hea .uu-lanlis a[aria-current]{color:var(--k-primary)} .uu-hea{position:sticky;top:0;z-index:30} .uu-nav a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.uu-her{margin:1rem 0 1.4rem} .uu-lea{font-size:1.12rem;max-width:46em;color:var(--k-dim)} 
.uu-too{margin:1.4rem 0 2rem}
.uu-not{margin:1.4em 0;padding:.9em 1.1em;background:var(--k-surface);border-left:4px solid var(--k-hi);border-radius:0 var(--k-corner) var(--k-corner) 0}
.uu-for{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--k-surface);border:1px dashed var(--k-primary);border-radius:var(--k-corner);overflow-x:auto}
.uu-tabwra{margin:1.2em 0;overflow-x:auto;border:1px solid var(--k-rule);border-radius:var(--k-corner);background:var(--k-surface)}
.uu-tab{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .uu-tab th,.uu-tab td{padding:.5em .75em;border-bottom:1px solid var(--k-rule);text-align:left}
.uu-tab thead th{background:color-mix(in srgb,var(--k-rule) 60%,var(--k-surface))}
ol.uu-ste{padding-left:1.3em} ol.uu-ste>li{margin:.5em 0}
.uu-fig{margin:1.6em 0;text-align:center} .uu-fig img{width:100%;max-width:720px;border-radius:var(--k-corner);border:1px solid var(--k-rule);background:#fff} .uu-fig figcaption{font-size:.9em;color:var(--k-dim)}
.uu-car{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.uu-cara{display:block;padding:1.1rem;background:var(--k-surface);border-radius:var(--k-corner);border:1px solid var(--k-rule);color:var(--k-fg);text-decoration:none}
.uu-cara b{display:block;font-family:var(--k-heading);margin-bottom:.35rem} .uu-cara span{color:var(--k-dim);font-size:.92rem} .uu-cara:hover{border-color:var(--k-primary)}
.uu-cara--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .uu-cara--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--k-fg) 14%,transparent)}
.uu-carimg{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .uu-cartxt{display:block;padding:1rem 1.1rem 1.1rem} .uu-cartxt>span{display:block}
.uu-bli a,.uu-bro,.uu-poskic{background:none!important}
.uu-carmet{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--k-primary)}
.uu-car--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .uu-car--feat>.uu-cara:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .uu-car--feat>.uu-cara:first-child b{font-size:1.35rem}
.uu-bli{display:grid;gap:1rem;margin:1.2em 0} .uu-bro{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--k-surface);border:1px solid var(--k-rule);border-radius:var(--k-corner);overflow:hidden;color:var(--k-fg);text-decoration:none}
.uu-bro .uu-carimg{height:100%;aspect-ratio:auto;min-height:126px} .uu-bro b{display:block;font-family:var(--k-heading);font-size:1.12rem;margin-bottom:.3rem} .uu-bro .uu-cartxt>span{color:var(--k-dim);font-size:.93rem} .uu-bro:hover{border-color:var(--k-primary)}
.uu-bli--min{list-style:none;padding:0;counter-reset:bl;gap:0} .uu-bli--min li{counter-increment:bl;border-top:1px solid var(--k-rule)} .uu-bli--min li:last-child{border-bottom:1px solid var(--k-rule)}
.uu-bli--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--k-fg);text-decoration:none} .uu-bli--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--k-heading);color:var(--k-primary)}
.uu-bli--min b{font-family:var(--k-heading);font-size:1.15rem} .uu-bli--min span{color:var(--k-dim);font-size:.93rem} .uu-bli--min a:hover b{color:var(--k-primary)}
.uu-poshea--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--k-corner);overflow:hidden} .uu-poshea--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.uu-posov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .uu-posov h1,.uu-posov .uu-posmet,.uu-posov .uu-poskic{color:#fff}
.uu-poshea--band{background:var(--k-primary);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--k-corner)} .uu-poshea--band h1,.uu-poshea--band .uu-posmet,.uu-poshea--band .uu-poskic{color:#fff}
.uu-poshea--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .uu-poshea--split .uu-poscov{margin:0}
.uu-toc--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .uu-toc--chips li{margin:0} .uu-toc--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--k-rule);border-radius:999px;background:var(--k-paper);text-decoration:none;font-size:.88rem}
.uu-toc--rail{background:none;border:0;border-left:3px solid var(--k-hi);border-radius:0;padding:.2rem 0 .2rem 1rem}
.uu-lan--globe summary{display:flex;align-items:center;gap:.35rem} .uu-lana{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .uu-lana a{padding:.25rem .7rem;border:1px solid var(--k-rule);border-radius:999px;text-decoration:none} .uu-lana a[aria-current]{background:var(--k-primary);border-color:var(--k-primary);color:#fff}
@media (max-width:700px){.uu-car--feat{grid-template-columns:1fr} .uu-car--feat>.uu-cara:first-child{display:flex} .uu-bro{grid-template-columns:1fr} .uu-bro .uu-carimg{min-height:0;aspect-ratio:1200/630} .uu-poshea--split{grid-template-columns:1fr} .uu-posov{position:static;background:var(--k-primary);padding:1.2rem} .uu-poshea--overlay>img{min-height:0}}
.uu-pos{max-width:48rem;margin:0 auto} .uu-poshea{margin:.6rem 0 1.2rem} .uu-poshea h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.uu-poskic{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--k-primary);text-decoration:none}
.uu-upd{color:var(--k-dim);font-size:.9rem;margin:2rem 0 0} .uu-sig{font-style:italic;color:var(--k-dim)} .uu-posmet{color:var(--k-dim);font-size:.92rem;margin:0} .uu-poscov{margin:0 0 1.6rem} .uu-poscov img{display:block;width:100%;height:auto;border-radius:var(--k-corner)}
.uu-pos .uu-lea{font-size:1.2rem;color:var(--k-fg)} .uu-pos .uu-lea::first-letter{font-family:var(--k-heading);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--k-primary)}
.uu-pos .uu-toc--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--k-surface);border:1px solid var(--k-rule);border-left:4px solid var(--k-primary);border-radius:var(--k-corner);font-size:.95rem}
.uu-toc--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .uu-toc--post li{margin:.2rem 0}
.uu-pos h3{color:var(--k-primary)} .uu-pos blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--k-hi);font-size:1.1em}
.uu-faqgri{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .uu-faqgri>div{background:var(--k-surface);border:1px solid var(--k-rule);border-radius:var(--k-corner);padding:1rem} .uu-faq h3{margin-top:0;font-size:1rem}
.uu-cru{font-size:.88rem;color:var(--k-dim);margin:.4rem 0 1rem} .uu-cru a{color:var(--k-dim)}
.uu-cta{margin:2.4rem 0;padding:1.4rem;background:var(--k-surface);border-radius:var(--k-corner);border:1px solid var(--k-rule);text-align:center}
.uu-btn{display:inline-block;padding:.7em 1.4em;background:var(--k-primary);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.uu-foo{border-top:1px solid var(--k-rule);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--k-dim);background:var(--k-surface)}
.uu-foo nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .uu-foo a{color:var(--k-dim)} .uu-foo{background:var(--k-fg);color:var(--k-paper)} .uu-foo a,.uu-foo p{color:var(--k-paper);opacity:.85}
.uu-sec{background:var(--k-surface);border:1px solid var(--k-rule);border-radius:var(--k-corner);padding:.2rem 1.4rem 1rem;margin:1.6rem 0} .uu-sec>h2{margin-top:1rem}
.uu-lay{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:2.4rem;align-items:start} .uu-toc{position:sticky;top:5rem;font-size:.9rem;border-left:2px solid var(--k-rule);padding-left:1rem} .uu-toc ol{list-style:none;padding:0;margin:.4rem 0 0} .uu-toc li{margin:.35rem 0} .uu-toc a{text-decoration:none;color:var(--k-dim)} .uu-toc a:hover{color:var(--k-primary)} .uu-lay>*{min-width:0} @media(max-width:900px){.uu-lay{grid-template-columns:1fr} .uu-toc:not(.uu-toc--post){display:none}}
.uu-lan{position:relative} .uu-lan summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--k-rule);border-radius:999px;font-size:.85rem}
.uu-lanlis{position:absolute;right:0;top:120%;background:var(--k-surface);border:1px solid var(--k-rule);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.uu-lanlis a{padding:.3rem .5rem;text-decoration:none;color:var(--k-fg)} .uu-lanlis a[aria-current]{font-weight:700;color:var(--k-primary)}
.uu-cod{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .uu-cod a{text-decoration:none;color:var(--k-dim);padding:.1rem .3rem;border-radius:4px} .uu-cod a[aria-current]{color:var(--k-primary);background:color-mix(in srgb,var(--k-primary) 12%,transparent)}
[data-unit]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-unit]:empty{margin:0}
[data-unit="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--k-surface)}
[data-unit="sidebar_left"],[data-unit="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-unit="sidebar_left"]{left:12px} [data-unit="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-unit="sidebar_left"],[data-unit="sidebar_right"]{display:none}}
.uu-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--k-dim)}
.uu-btn{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.uu-tabwra{border:0;border-top:3px solid var(--k-primary);border-radius:0;background:transparent} .uu-tab thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.uu-sec a:not(.uu-btn):not(.uu-cara){text-decoration-thickness:2px}
.uu-her--art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;text-align:left} .uu-her--art .uu-art{width:170px;height:170px;display:grid;place-items:center} .uu-art svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--k-primary) 35%,transparent))} .uu-art--ring{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--k-hi) 30%,transparent) 0 38%,transparent 39% 52%,color-mix(in srgb,var(--k-primary) 18%,transparent) 53% 66%,transparent 67%)} .uu-art--ring svg{width:56%;height:56%} @media(max-width:700px){.uu-her--art{grid-template-columns:1fr} .uu-her--art .uu-art{display:none}}
@media (max-width:640px){.uu-heain{gap:.5rem} .uu-nav{gap:.8rem}}

/* UUID Generator — tool styles. Only site tokens: --k-paper --k-surface --k-fg --k-dim --k-primary --k-hi --k-rule --k-corner --k-heading --k-body */
.uuid-gen-container {
    --ug-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --ug-tint: color-mix(in srgb, var(--k-primary) 8%, var(--k-surface));
    --ug-tint2: color-mix(in srgb, var(--k-hi) 10%, var(--k-surface));
    color: var(--k-fg);
    font-family: var(--k-body);
    color-scheme: inherit;
    position: relative;
    max-width: 100%;
}
.uuid-gen-container *, .uuid-gen-container *::before, .uuid-gen-container *::after { box-sizing: border-box; }
.uuid-gen-sr, .uuid-gen-offscreen {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.uuid-gen-container [hidden] { display: none !important; }
.uuid-gen-options, .uuid-gen-panel { container-type: inline-size; }

/* ── top: mode tabs + help ── */
.uuid-gen-top { display: flex; align-items: flex-end; gap: .5rem; border-bottom: 2px solid var(--k-rule); margin-bottom: 1rem; }
.uuid-gen-main-tabs { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.uuid-gen-main-tab {
    appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
    padding: .6rem .9rem; font: 600 .95rem/1.2 var(--k-body); color: var(--k-dim); cursor: pointer;
    border-radius: var(--k-corner) var(--k-corner) 0 0;
}
.uuid-gen-main-tab:hover { color: var(--k-fg); background: var(--ug-tint); }
.uuid-gen-main-tab.active { color: var(--k-primary); border-bottom-color: var(--k-hi); }
.uuid-gen-shortcuts-btn {
    appearance: none; width: 2rem; height: 2rem; margin-bottom: .35rem; border-radius: 50%;
    border: 1px solid var(--k-rule); background: var(--k-surface); color: var(--k-dim); font: 700 .9rem/1 var(--k-body); cursor: pointer;
}
.uuid-gen-shortcuts-btn:hover { color: var(--k-primary); border-color: var(--k-primary); }

/* ── version chips ── */
.uuid-gen-versions { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4rem; margin-bottom: .9rem; }
.uuid-gen-ver {
    appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0;
    padding: .5rem .55rem; border: 1px solid var(--k-rule); border-radius: var(--k-corner); background: var(--k-surface);
    color: var(--k-fg); cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s, transform .15s;
}
.uuid-gen-ver b { font: 700 1.05rem/1.1 var(--k-heading); }
.uuid-gen-ver small { font: .72rem/1.2 var(--k-body); color: var(--k-dim); overflow-wrap: anywhere; }
.uuid-gen-ver:hover { border-color: var(--k-primary); }
.uuid-gen-ver.active { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-surface); }
.uuid-gen-ver.active small { color: color-mix(in srgb, var(--k-surface) 82%, var(--k-primary)); }

/* ── fields ── */
.uuid-gen-name-fields, .uuid-gen-format-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: .9rem; }
.uuid-gen-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1 1 12rem; }
.uuid-gen-name-field { flex: 2 1 16rem; }
.uuid-gen-field label, .uuid-gen-label { font: 600 .82rem/1.3 var(--k-body); color: var(--k-dim); }
.uuid-gen-label { display: block; margin-bottom: .35rem; }
.uuid-gen-select, .uuid-gen-input {
    width: 100%; min-height: 2.6rem; padding: .5rem .7rem; font: 1rem/1.4 var(--k-body); color: var(--k-fg);
    background: var(--k-paper); border: 1px solid var(--k-rule); border-radius: var(--k-corner);
}
.uuid-gen-select:disabled { opacity: .55; cursor: not-allowed; }
textarea.uuid-gen-input, .uuid-gen-bulk-results { font: .92rem/1.5 var(--ug-mono); resize: vertical; }
.uuid-gen-custom-ns, .uuid-gen-name { font-family: var(--ug-mono); }
.uuid-gen-select:focus-visible, .uuid-gen-input:focus-visible, .uuid-gen-bulk-results:focus-visible,
.uuid-gen-container button:focus-visible, .uuid-gen-display:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--k-hi) 70%, transparent); outline-offset: 2px;
}

/* ── the UUID display: colour-coded fields ── */
.uuid-gen-display {
    position: relative; display: block; padding: 1.1rem 1.2rem; border-radius: var(--k-corner); cursor: copy;
    background:
        linear-gradient(180deg, transparent calc(100% - 7px), color-mix(in srgb, var(--k-primary) 7%, transparent) calc(100% - 7px)),
        var(--k-surface);
    border: 1px solid var(--k-rule); border-left: 6px solid var(--k-hi);
    font: 600 clamp(.68rem, 3.7cqi, 1.7rem)/1.35 var(--ug-mono); letter-spacing: .01em;
    overflow-wrap: anywhere; word-break: break-all; min-height: 3.6rem;
}
.uuid-gen-display:hover { border-color: var(--k-primary); border-left-color: var(--k-hi); }
.uuid-gen-d-time { color: var(--k-primary); }
.uuid-gen-d-ver { color: var(--k-hi); text-decoration: underline 3px; text-underline-offset: .25em; }
.uuid-gen-d-var { color: var(--k-hi); text-decoration: underline 3px dotted; text-underline-offset: .25em; }
.uuid-gen-d-ctr { color: color-mix(in srgb, var(--k-primary) 55%, var(--k-hi)); }
.uuid-gen-d-rand { color: var(--k-fg); }
.uuid-gen-d-seq { color: color-mix(in srgb, var(--k-hi) 55%, var(--k-fg)); }
.uuid-gen-d-node { color: color-mix(in srgb, var(--k-primary) 45%, var(--k-fg)); font-style: italic; }
.uuid-gen-d-hash { color: color-mix(in srgb, var(--k-primary) 70%, var(--k-fg)); }
.uuid-gen-d-fixed { color: var(--k-dim); }
.uuid-gen-d-sep, .uuid-gen-d-affix { color: var(--k-dim); font-weight: 400; }
.uuid-gen-d-plain { color: var(--k-fg); }
@media (prefers-reduced-motion: no-preference) {
    .uuid-gen-display-text { display: inline-block; animation: uuid-gen-in .28s ease-out; }
    @keyframes uuid-gen-in { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
}

.uuid-gen-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .55rem 0 .2rem; font-size: .8rem; color: var(--k-dim); }
.uuid-gen-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.uuid-gen-sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: currentColor; }
.uuid-gen-meta { margin: .35rem 0 1rem; font-size: .88rem; color: var(--k-dim); min-height: 1.3em; }

/* ── buttons ── */
.uuid-gen-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.uuid-gen-btn {
    appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem;
    padding: .5rem 1.05rem; border-radius: var(--k-corner); border: 1px solid transparent; cursor: pointer;
    font: 600 .95rem/1.2 var(--k-body); transition: background-color .15s, border-color .15s, color .15s;
}
.uuid-gen-btn:disabled { opacity: .5; cursor: not-allowed; }
.uuid-gen-btn-primary { background: var(--k-primary); color: var(--k-surface); }
.uuid-gen-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--k-primary) 85%, var(--k-fg)); }
.uuid-gen-btn-secondary { background: var(--k-surface); color: var(--k-primary); border-color: color-mix(in srgb, var(--k-primary) 45%, var(--k-rule)); }
.uuid-gen-btn-secondary:hover:not(:disabled) { background: var(--ug-tint); }
.uuid-gen-btn-ghost { background: transparent; color: var(--k-dim); }
.uuid-gen-btn-ghost:hover:not(:disabled) { color: var(--k-fg); background: var(--ug-tint); }
.uuid-gen-icon-btn { appearance: none; border: 0; background: transparent; color: var(--k-dim); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .45rem; border-radius: var(--k-corner); }
.uuid-gen-icon-btn:hover { color: var(--k-fg); background: var(--ug-tint); }

/* ── history ── */
.uuid-gen-collapsible { margin-top: 1.25rem; border: 1px solid var(--k-rule); border-radius: var(--k-corner); background: var(--k-surface); }
.uuid-gen-collapsible-header {
    appearance: none; width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: .7rem 1rem; background: transparent; border: 0; color: var(--k-fg); font: 600 .95rem/1.2 var(--k-body); cursor: pointer;
}
.uuid-gen-chevron { transition: transform .2s; color: var(--k-dim); }
.uuid-gen-collapsible-header[aria-expanded="true"] .uuid-gen-chevron { transform: rotate(180deg); }
.uuid-gen-collapsible-body { padding: 0 1rem 1rem; }
.uuid-gen-history-header { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--k-dim); }
.uuid-gen-history-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.uuid-gen-history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; padding: .35rem 0; border-top: 1px dashed var(--k-rule); }
.uuid-gen-history-version { font: 700 .75rem/1 var(--k-body); padding: .25rem .45rem; border-radius: 999px; background: var(--ug-tint2); color: var(--k-fg); }
.uuid-gen-history-uuid { font: .86rem/1.4 var(--ug-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-fg); }
.uuid-gen-history-time { font-size: .75rem; color: var(--k-dim); }
.uuid-gen-history-copy { min-height: 2rem; padding: .25rem .6rem; font-size: .82rem; }
.uuid-gen-history-empty { margin: .5rem 0 0; font-size: .88rem; color: var(--k-dim); }

/* ── bulk ── */
.uuid-gen-bulk-controls { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin-bottom: .8rem; }
.uuid-gen-count-field { flex: 0 1 14rem; }
.uuid-gen-names-field { flex: 1 1 18rem; }
.uuid-gen-bulk-results {
    width: 100%; min-height: 12rem; padding: .7rem .8rem; color: var(--k-fg); border: 1px solid var(--k-rule); border-radius: var(--k-corner);
    background: linear-gradient(90deg, var(--ug-tint) 0 2.4rem, var(--k-paper) 2.4rem); padding-left: 3rem; white-space: pre; overflow: auto;
}
.uuid-gen-bulk-info { margin: .5rem 0 .7rem; font-size: .88rem; color: var(--k-dim); min-height: 1.3em; }
.uuid-gen-download-group { display: flex; gap: .4rem; flex-wrap: wrap; }
.uuid-gen-download-group .uuid-gen-select { width: auto; min-width: 11rem; }

/* ── validate ── */
.uuid-gen-panel-validate .uuid-gen-actions { margin: .7rem 0 1rem; }
.uuid-gen-validation-result { border: 1px solid var(--k-rule); border-radius: var(--k-corner); padding: 1rem; background: var(--k-surface); }
.uuid-gen-validation-result.valid { border-left: 6px solid var(--k-primary); }
.uuid-gen-validation-result.warn { border-left: 6px solid color-mix(in srgb, var(--k-hi) 60%, var(--k-primary)); }
.uuid-gen-validation-result.invalid { border-left: 6px solid var(--k-hi); background: var(--ug-tint2); }
.uuid-gen-val-title { display: flex; gap: .55rem; align-items: center; font: 700 1.05rem/1.3 var(--k-heading); margin-bottom: .6rem; }
.uuid-gen-val-icon {
    display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--k-primary); color: var(--k-surface); font: 700 .95rem/1 var(--k-body); flex: none;
}
.invalid .uuid-gen-val-icon { background: var(--k-hi); }
.uuid-gen-val-list { margin: 0; display: grid; gap: 0; }
.uuid-gen-val-row { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .8rem; padding: .45rem 0; border-top: 1px dashed var(--k-rule); }
.uuid-gen-val-label { font-size: .85rem; color: var(--k-dim); }
.uuid-gen-val-value { margin: 0; overflow-wrap: anywhere; color: var(--k-fg); }
.uuid-gen-mono { font-family: var(--ug-mono); font-size: .92rem; }
.uuid-gen-val-note { margin: .6rem 0 0; font-size: .9rem; color: var(--k-fg); }
.uuid-gen-val-summary { display: flex; flex-wrap: wrap; gap: .4rem; }
.uuid-gen-chip { font-size: .82rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--k-rule); background: var(--k-paper); color: var(--k-fg); }
.uuid-gen-chip.ok { border-color: var(--k-primary); }
.uuid-gen-chip.bad { border-color: var(--k-hi); background: var(--ug-tint2); }
.uuid-gen-val-lines { list-style: none; margin: .8rem 0 0; padding: 0; max-height: 22rem; overflow: auto; border-top: 1px solid var(--k-rule); }
.uuid-gen-val-line { display: grid; grid-template-columns: 4.5rem minmax(0, 22rem) minmax(0, 1fr); gap: .6rem; padding: .35rem .2rem; border-bottom: 1px dashed var(--k-rule); font-size: .85rem; align-items: baseline; }
.uuid-gen-val-line code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uuid-gen-val-line.bad { background: var(--ug-tint2); }
.uuid-gen-val-line.dup .uuid-gen-val-tail { color: var(--k-hi); font-weight: 600; }
.uuid-gen-val-ln, .uuid-gen-val-tail { color: var(--k-dim); }
.uuid-gen-val-line.bad .uuid-gen-val-tail { color: var(--k-fg); }

/* ── toast ── */
.uuid-gen-toast {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); z-index: 60; max-width: calc(100vw - 2rem);
    padding: .6rem 1rem; border-radius: var(--k-corner); background: var(--k-fg); color: var(--k-paper); font: 600 .9rem/1.3 var(--k-body);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.uuid-gen-toast.show { opacity: 1; transform: translate(-50%, 0); }
.uuid-gen-toast.err { background: var(--k-hi); color: var(--k-surface); }
.uuid-gen-toast:empty { display: none; }

/* ── shortcuts dialog ── */
.uuid-gen-shortcuts-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--k-fg) 45%, transparent); }
.uuid-gen-shortcuts-modal { width: min(28rem, 100%); background: var(--k-surface); color: var(--k-fg); border-radius: var(--k-corner); border: 1px solid var(--k-rule); padding: 1rem 1.2rem; }
.uuid-gen-shortcuts-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-family: var(--k-heading); }
.uuid-gen-shortcuts-list { list-style: none; margin: 0; padding: 0; }
.uuid-gen-shortcuts-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px dashed var(--k-rule); font-size: .9rem; }
.uuid-gen-shortcuts-list kbd { font: .8rem/1 var(--ug-mono); padding: .2rem .4rem; border: 1px solid var(--k-rule); border-bottom-width: 2px; border-radius: 4px; background: var(--k-paper); }

/* ── phone ── */
@container (max-width: 720px) {
    .uuid-gen-versions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .uuid-gen-val-row { grid-template-columns: 1fr; gap: .15rem; }
    .uuid-gen-val-line { grid-template-columns: 1fr; gap: .1rem; }
    .uuid-gen-history-item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .uuid-gen-history-time { display: none; }
}
@media (max-width: 400px) {
    .uuid-gen-main-tab { padding: .55rem .6rem; font-size: .88rem; }
}
@container (max-width: 400px) {
    .uuid-gen-ver { padding: .45rem .4rem; }
    .uuid-gen-ver small { font-size: .66rem; }
    .uuid-gen-display { padding: .9rem .8rem; }
    .uuid-gen-btn { padding: .5rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .uuid-gen-container * { transition: none !important; animation: none !important; }
}

/* design: sites/<d>/design/site.css */
/* uuid-generator.net — "asset tags on a server rack". Tokens only; canonical t- classes (renamed by the builder). */

/* rack door: staggered perforation */
body {
  background-color: var(--k-paper);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--k-primary) 11%, transparent) 0 1.4px, transparent 1.9px),
    radial-gradient(circle, color-mix(in srgb, var(--k-primary) 11%, transparent) 0 1.4px, transparent 1.9px);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* ---------- header: 1U rack panel with a cage-nut rail ---------- */
.uu-hea {
  position: sticky; top: 0; z-index: 30;
  background: var(--k-fg); color: var(--k-paper); border-bottom: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--k-fg) 60%, var(--k-paper));
}
.uu-hea::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, var(--k-paper) 18px 24px, transparent 24px 46px) center / 100% 5px no-repeat,
    color-mix(in srgb, var(--k-fg) 82%, var(--k-paper));
}
.uu-heain { padding-top: .8rem; padding-bottom: .8rem; }
.uu-bra { color: var(--k-paper); letter-spacing: .01em; }
.uu-bra:hover { color: color-mix(in srgb, var(--k-paper) 80%, var(--k-hi)); }
.uu-nav a { color: color-mix(in srgb, var(--k-paper) 88%, var(--k-fg)); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.uu-nav a:hover, .uu-nav a[aria-current] { color: var(--k-paper); text-decoration: underline; text-decoration-color: var(--k-hi); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* language codes as stamped port labels */
.uu-cod { gap: .3rem; }
.uu-cod a {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--k-paper) 82%, var(--k-fg)); padding: .18rem .42rem; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--k-paper) 30%, var(--k-fg));
}
.uu-cod a:hover { color: var(--k-paper); border-color: var(--k-paper); }
.uu-cod a[aria-current] { color: var(--k-fg); background: var(--k-paper); border-color: var(--k-paper); }
.uu-lan summary { color: var(--k-paper); border-color: color-mix(in srgb, var(--k-paper) 35%, var(--k-fg)); }
.uu-lanlis a { color: var(--k-fg); }

/* ---------- plates: riveted asset tags ---------- */
.uu-her, .uu-too, .uu-sec, .uu-cta, .uu-faqgri > div, .uu-bro, .uu-cara {
  --rv: color-mix(in srgb, var(--k-dim) 45%, var(--k-surface));
  background-color: var(--k-surface);
  background-image:
    radial-gradient(circle at 12px 12px, var(--rv) 0 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) 12px, var(--rv) 0 3px, transparent 3.6px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--rv) 0 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--rv) 0 3px, transparent 3.6px);
  border: 1px solid color-mix(in srgb, var(--k-rule) 70%, var(--k-dim));
  border-radius: var(--k-corner);
  box-shadow: 0 1px 0 var(--k-surface) inset, 0 2px 0 color-mix(in srgb, var(--k-rule) 80%, var(--k-dim));
}
.uu-her { padding: 1.8rem 2rem 1.6rem; margin-top: 1.8rem; }
.uu-her h1 { margin-top: 0; }
.uu-her .uu-lea { color: var(--k-dim); }
.uu-too { padding: 1.4rem 1.5rem 1.6rem; }
.uu-sec { padding: .4rem 1.8rem 1.4rem; margin: 1.8rem 0; }
.uu-cara, .uu-bro { background-image: none; }
.uu-bro:hover, .uu-cara:hover { border-color: var(--k-primary); }

/* ---------- headings: a stamped 8-4-4-4-12 bar ---------- */
.uu-sec > h2, .uu-pos h2, .uu-faq > h2, .uu-mai > h2 { border: 0; padding-top: 0; }
.uu-sec > h2::before, .uu-pos h2::before, .uu-faq > h2::before, .uu-mai > h2::before {
  content: ""; display: block; width: 8.5rem; height: 6px; margin: 0 0 .7rem; border-radius: 1px;
  background: linear-gradient(90deg,
    var(--k-hi) 0 24%, transparent 24% 27%,
    var(--k-primary) 27% 38%, transparent 38% 41%,
    var(--k-primary) 41% 52%, transparent 52% 55%,
    var(--k-primary) 55% 66%, transparent 66% 69%,
    var(--k-primary) 69% 100%);
}
.uu-sec > h2 { margin-top: 1.5rem; }
.uu-sec h3, .uu-pos h3 { color: var(--k-primary); }

/* ---------- body details ---------- */
.uu-sec code, .uu-pos code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em;
  padding: .08em .32em; border-radius: 3px; background: color-mix(in srgb, var(--k-primary) 8%, var(--k-surface));
  border: 1px solid color-mix(in srgb, var(--k-rule) 80%, transparent); overflow-wrap: anywhere;
}
.uu-tab code { background: transparent; border: 0; padding: 0; }
.uu-tabwra { border: 1px solid color-mix(in srgb, var(--k-rule) 70%, var(--k-dim)); border-top: 4px solid var(--k-fg); border-radius: var(--k-corner); background: var(--k-surface); }
.uu-tab thead th { background: color-mix(in srgb, var(--k-primary) 8%, var(--k-surface)); color: var(--k-fg); text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; }
.uu-tab caption { caption-side: top; text-align: left; padding: .6rem .75rem .2rem; font-size: .85rem; color: var(--k-dim); }
.uu-tab td:first-child { font-weight: 600; }
.uu-for { border: 1px solid var(--k-rule); border-left: 4px solid var(--k-hi); background: color-mix(in srgb, var(--k-hi) 4%, var(--k-surface)); font-size: 1.05rem; }
.uu-not { background: color-mix(in srgb, var(--k-primary) 7%, var(--k-surface)); border-left-color: var(--k-primary); }
ol.uu-ste { list-style: none; padding-left: 0; counter-reset: st; }
ol.uu-ste > li { counter-increment: st; position: relative; padding: .55rem 0 .55rem 3rem; border-top: 1px dashed var(--k-rule); }
ol.uu-ste > li::before {
  content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: .55rem;
  font: 700 .8rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--k-surface); background: var(--k-fg);
  padding: .32rem .4rem; border-radius: 3px; letter-spacing: .04em;
}
.uu-fig img { border-color: color-mix(in srgb, var(--k-rule) 70%, var(--k-dim)); }
.uu-cru { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: .02em; }

/* contents column on the home page: a patch-panel label strip */
.uu-toc { border-left: 0; padding: .9rem 1rem; background: var(--k-surface); border: 1px solid var(--k-rule); border-top: 4px solid var(--k-fg); border-radius: var(--k-corner); }
.uu-toc ol { counter-reset: tc; }
.uu-toc li { counter-increment: tc; display: grid; grid-template-columns: 1.8rem 1fr; }
.uu-toc li::before { content: counter(tc, decimal-leading-zero); font: 600 .72rem/1.9 ui-monospace, Menlo, Consolas, monospace; color: var(--k-hi); }
.uu-toc--post li, .uu-toc--chips li { display: list-item; }
.uu-toc--post li::before, .uu-toc--chips li::before { content: none; }

/* buttons: square, stamped */
.uu-btn { border-radius: 4px; background: var(--k-fg); color: var(--k-paper); box-shadow: 0 3px 0 var(--k-hi); }
.uu-btn:hover { background: var(--k-primary); }
.uu-cta { text-align: left; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.8rem; }

/* ---------- FAQ: hanging tags with a punched hole ---------- */
.uu-faqgri > div {
  position: relative; padding: 1.1rem 1.2rem 1.1rem 2.6rem;
  background-image: radial-gradient(circle at 1.25rem 1.45rem, var(--k-paper) 0 5px, color-mix(in srgb, var(--k-rule) 70%, var(--k-dim)) 5.5px 6.5px, transparent 7px);
}
.uu-faq h3 { font-size: 1rem; color: var(--k-fg); }

/* ---------- blog list and articles ---------- */
.uu-bro { grid-template-columns: 260px 1fr; }
.uu-bro b { color: var(--k-fg); }
.uu-carmet { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; color: var(--k-hi); }
.uu-poshea--band { background: var(--k-fg); position: relative; border-radius: var(--k-corner); padding-bottom: 2.6rem; }
.uu-poshea--band::after {
  content: ""; position: absolute; left: 1.6rem; bottom: 1.1rem; width: 9rem; height: 6px;
  background: linear-gradient(90deg, var(--k-hi) 0 24%, transparent 24% 27%, var(--k-paper) 27% 38%, transparent 38% 41%, var(--k-paper) 41% 52%, transparent 52% 55%, var(--k-paper) 55% 66%, transparent 66% 69%, var(--k-paper) 69% 100%);
}
.uu-poshea--band .uu-poskic, .uu-poshea--band .uu-posmet { color: color-mix(in srgb, var(--k-paper) 85%, var(--k-fg)); }
.uu-poscov img { border: 1px solid var(--k-rule); }
.uu-pos { margin-top: 1.2rem; }
.uu-pos .uu-sec { margin: 1.4rem 0; }
.uu-pos .uu-lea::first-letter { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--k-hi); }
.uu-toc--chips a { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; border-radius: 3px; background: var(--k-paper); color: var(--k-fg); }
.uu-toc--chips a:hover { border-color: var(--k-primary); color: var(--k-primary); }

/* ---------- footer: bottom rack panel ---------- */
.uu-foo { position: relative; background: var(--k-fg); color: var(--k-paper); border-top: 0; margin-top: 3.4rem; }
.uu-foo::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, var(--k-paper) 18px 24px, transparent 24px 46px) center / 100% 5px no-repeat,
    color-mix(in srgb, var(--k-fg) 82%, var(--k-paper));
}
.uu-foo a, .uu-foo p { color: color-mix(in srgb, var(--k-paper) 86%, var(--k-fg)); opacity: 1; }
.uu-foo a:hover { color: var(--k-paper); }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  .uu-her { padding: 1.3rem 1.1rem 1.1rem; }
  .uu-too { padding: 1rem .8rem 1.2rem; margin-left: -.25rem; margin-right: -.25rem; }
  .uu-sec { padding: .2rem 1rem 1rem; }
  .uu-bro { grid-template-columns: 1fr; }
  .uu-cta { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .uu-cara, .uu-bro { transition: none; }
}