* { box-sizing:border-box; }
:root {
    --pd-ui-bg:#fafafa;
    --pd-ui-surface:#ffffff;
    --pd-ui-ink:#18212d;
    --pd-ui-muted:#67717e;
    --pd-ui-line:#e3e6ea;
    --pd-ui-soft:#f2f3f5;
    --pd-ui-green:#137333;
    --pd-ui-amber:#9b570b;
    --pd-ui-blue:var(--pd-feed-color-reply);
    --pd-ui-max-width:calc(var(--pd-sidebar-width) * 4);
    --pd-ui-stage-height:calc(var(--pd-space-5) * 4);
}
body.pd-ui-page { margin:0; background:var(--pd-ui-bg); color:var(--pd-ui-ink); font-family:var(--pd-font-system); font-size:var(--pd-fs-sm); line-height:var(--pd-lh-normal); }
body.pd-ui-page.is-dark { color-scheme:dark; --pd-ui-bg:#15191e; --pd-ui-surface:#20262d; --pd-ui-ink:#ecf0f4; --pd-ui-muted:#a2acb7; --pd-ui-line:#343d47; --pd-ui-soft:#282f38; --pd-ui-green:#85cb9b; --pd-ui-amber:#edbd77; }
.pd-ui-page a { color:var(--pd-ui-blue); text-decoration:none; }
.pd-ui-page button,.pd-ui-page input,.pd-ui-page select { font:inherit; }
.pd-ui-page button { cursor:pointer; }
.pd-ui-page :focus-visible { outline:var(--pd-tab-indicator) solid var(--pd-ui-blue); outline-offset:var(--pd-tab-indicator); }
.pd-ui-topbar { display:flex; align-items:center; justify-content:space-between; gap:var(--pd-space-3); max-width:var(--pd-ui-max-width); margin:auto; padding:var(--pd-space-3) var(--pd-space-4); border-bottom:1px solid var(--pd-ui-line); }
.pd-ui-brand { display:flex; align-items:center; gap:var(--pd-space-2); color:var(--pd-ui-ink) !important; }
.pd-ui-brand > span { display:flex; align-items:center; justify-content:center; width:calc(var(--pd-space-5) * 3); height:var(--pd-btn-h-lg); padding:var(--pd-space-1); border-radius:var(--pd-btn-radius); background:var(--pd-ui-blue); }
.pd-ui-brand img { display:block; width:100%; height:100%; object-fit:contain; }
.pd-ui-brand strong { font-size:var(--pd-fs-md); font-weight:var(--pd-fw-semibold); }
.pd-ui-topbar > nav { display:flex; align-items:center; gap:var(--pd-space-3); font-size:var(--pd-fs-xs); }
.pd-ui-topbar nav a { color:var(--pd-ui-muted); }
.pd-ui-theme { width:var(--pd-btn-h-sm); height:var(--pd-btn-h-sm); color:var(--pd-ui-ink); background:var(--pd-ui-surface); border:1px solid var(--pd-ui-line); border-radius:var(--pd-btn-radius); }
.pd-ui-main { max-width:var(--pd-ui-max-width); margin:auto; padding:var(--pd-space-5) var(--pd-space-4); }
.pd-ui-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--pd-space-5); padding-block:var(--pd-space-4); }
.pd-ui-eyebrow { color:var(--pd-ui-blue); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-medium); }
.pd-ui-hero h1 { margin:var(--pd-space-2) 0 var(--pd-space-3); font-size:var(--pd-fs-display); font-weight:var(--pd-fw-medium); line-height:var(--pd-lh-tight); letter-spacing:-.03em; }
.pd-ui-hero p { margin:0; color:var(--pd-ui-muted); font-size:var(--pd-fs-sm); line-height:var(--pd-lh-normal); }
.pd-ui-hero-actions { display:flex; flex-wrap:wrap; gap:var(--pd-space-2); margin-top:var(--pd-space-4); }
.pd-ui-primary,.pd-ui-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:var(--pd-btn-h); padding:0 var(--pd-btn-px); border-radius:var(--pd-btn-radius); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-medium); }
.pd-ui-primary { background:var(--pd-ui-blue); color:#fff !important; border:1px solid var(--pd-ui-blue); }
.pd-ui-secondary { background:var(--pd-ui-surface); border:1px solid var(--pd-ui-line); color:var(--pd-ui-ink) !important; }
.pd-ui-stat-row { display:flex; flex-wrap:wrap; gap:var(--pd-space-4); margin-top:var(--pd-space-4); color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-stat-row span { display:flex; align-items:baseline; gap:var(--pd-space-1); }
.pd-ui-stat-row strong { color:var(--pd-ui-ink); font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); }
.pd-ui-hero-art { overflow:hidden; background:var(--pd-ui-surface); border:1px solid var(--pd-ui-line); border-radius:var(--pd-card-radius-lg); box-shadow:0 var(--pd-space-2) var(--pd-space-5) #00000007; }
.pd-ui-hero-art > img { display:block; width:100%; height:auto; }
.pd-ui-art-note { padding:var(--pd-card-padding); }
.pd-ui-art-note > span { display:block; margin-bottom:var(--pd-space-1); font-size:var(--pd-fs-sm); font-weight:var(--pd-fw-medium); }
.pd-ui-art-note p { font-size:var(--pd-fs-xs); }
.pd-ui-hero-samples { display:flex; align-items:center; flex-wrap:wrap; gap:var(--pd-space-2); padding:var(--pd-card-padding); border-top:1px solid var(--pd-ui-line); }
.pd-ui-hero-samples > img { display:block; height:var(--pd-icon-xl); width:auto; }
.pd-ui-hero-samples span { color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-colors { display:flex; align-items:center; flex-wrap:wrap; gap:var(--pd-space-4); margin-block:var(--pd-space-4) var(--pd-space-5); padding:var(--pd-space-3) 0; border-block:1px solid var(--pd-ui-line); }
.pd-ui-colors > span { color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-colors > div { display:flex; align-items:center; gap:var(--pd-space-1); }
.pd-ui-colors i { width:var(--pd-icon-md); height:var(--pd-icon-md); border-radius:var(--pd-radius-xs); }
.pd-ui-colors span:not(:first-child) { font-size:var(--pd-fs-xs); }
.pd-ui-colors small { display:block; color:var(--pd-ui-muted); font-size:var(--pd-fs-3xs); }
.pd-ui-swatch-reply { background:var(--pd-feed-color-reply); }
.pd-ui-swatch-latest { background:var(--pd-feed-color-latest); }
.pd-ui-swatch-hot { background:var(--pd-feed-color-hot); }
.pd-ui-swatch-good { background:var(--pd-feed-color-good); }
.pd-ui-gallery { scroll-margin-top:var(--pd-space-4); }
.pd-ui-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--pd-space-3); margin-bottom:var(--pd-space-3); }
.pd-ui-section-head h2,.pd-ui-origin-note h2 { margin:0; font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); }
.pd-ui-section-head p { margin:var(--pd-space-1) 0 0; color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-section-head > a { font-size:var(--pd-fs-xs); }
.pd-ui-controls { position:sticky; top:0; z-index:2; padding:var(--pd-space-2) 0; background:var(--pd-ui-bg); border-bottom:1px solid var(--pd-ui-line); }
.pd-ui-tabs { display:flex; gap:calc(var(--pd-space-1) / 2); overflow:auto; scrollbar-width:none; }
.pd-ui-tabs button { flex:none; display:flex; align-items:center; gap:calc(var(--pd-space-1) / 2); min-height:var(--pd-btn-h-sm); padding:0 var(--pd-space-2); border:0; border-radius:var(--pd-btn-radius); background:transparent; color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-tabs button[aria-pressed="true"] { color:#fff; background:var(--pd-ui-blue); }
.pd-ui-tabs small { opacity:.75; font-size:var(--pd-fs-3xs); }
.pd-ui-filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--pd-space-1); margin-top:var(--pd-space-2); }
.pd-ui-search { display:flex; flex:1; align-items:center; gap:var(--pd-space-1); min-width:calc(var(--pd-space-5) * 6); height:var(--pd-input-h); padding-inline:var(--pd-space-2); border:1px solid var(--pd-ui-line); border-radius:var(--pd-input-radius); background:var(--pd-ui-surface); color:var(--pd-ui-muted); }
.pd-ui-search input { width:100%; min-width:0; border:0; outline:none; background:transparent; color:var(--pd-ui-ink); font-size:var(--pd-fs-xs); }
.pd-ui-search:focus-within { outline:var(--pd-tab-indicator) solid var(--pd-ui-blue); outline-offset:var(--pd-tab-indicator); }
.pd-ui-filter-row select,.pd-ui-clear { min-height:var(--pd-input-h); padding-inline:var(--pd-space-2); border:1px solid var(--pd-ui-line); border-radius:var(--pd-input-radius); background:var(--pd-ui-surface); color:var(--pd-ui-ink); font-size:var(--pd-fs-xs); }
.pd-ui-clear { color:var(--pd-ui-muted); }
.pd-ui-results { margin:var(--pd-space-3) 0; color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pd-space-3); }
.pd-ui-asset { min-width:0; overflow:hidden; border:1px solid var(--pd-ui-line); border-radius:var(--pd-card-radius); background:var(--pd-ui-surface); }
.pd-ui-stage { display:flex; align-items:center; justify-content:center; width:100%; height:var(--pd-ui-stage-height); padding:var(--pd-space-3); background:var(--pd-ui-soft); border:0; border-bottom:1px solid var(--pd-ui-line); }
.pd-ui-stage img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.pd-ui-asset[data-category="banners"] .pd-ui-stage img { width:100%; height:100%; }
.pd-ui-asset[data-category="icons"] .pd-ui-stage img { width:var(--pd-side-icon-art); height:var(--pd-side-icon-art); }
.pd-ui-asset[data-category="badges"] .pd-ui-stage img { max-height:var(--pd-space-5); max-width:80%; }
.pd-ui-asset[data-category="emotes"] .pd-ui-stage img { width:calc(var(--pd-side-icon-art) * 1.5); height:calc(var(--pd-side-icon-art) * 1.5); }
.pd-ui-stage[data-category="stamps"],.pd-ui-detail-stage { background-color:var(--pd-ui-soft); background-image:linear-gradient(45deg,#8888880a 25%,transparent 25%),linear-gradient(-45deg,#8888880a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#8888880a 75%),linear-gradient(-45deg,transparent 75%,#8888880a 75%); background-size:var(--pd-space-3) var(--pd-space-3); }
.pd-ui-asset-copy { padding:var(--pd-card-padding); }
.pd-ui-tags { display:flex; align-items:center; justify-content:space-between; gap:var(--pd-space-1); margin-bottom:var(--pd-space-1); font-size:var(--pd-fs-3xs); color:var(--pd-ui-muted); }
.pd-ui-origin[data-origin="custom"] { color:var(--pd-ui-green); }
.pd-ui-origin[data-origin="reference"] { color:var(--pd-ui-amber); }
.pd-ui-asset h3 { overflow:hidden; margin:0 0 calc(var(--pd-space-1) / 2); color:var(--pd-ui-ink); font-size:var(--pd-fs-sm); font-weight:var(--pd-fw-medium); white-space:nowrap; text-overflow:ellipsis; }
.pd-ui-asset p { margin:0; color:var(--pd-ui-muted); font-size:var(--pd-fs-2xs); }
.pd-ui-asset-meta { display:flex; justify-content:space-between; gap:var(--pd-space-2); margin-top:var(--pd-space-2); padding-top:var(--pd-space-1); border-top:1px solid var(--pd-ui-line); font-size:var(--pd-fs-3xs); color:var(--pd-ui-muted); }
.pd-ui-font-demo { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--pd-space-3); font-size:var(--pd-fs-display); }
.pd-ui-font-demo i:nth-child(1) { color:var(--pd-feed-color-reply); }
.pd-ui-font-demo i:nth-child(2) { color:var(--pd-feed-color-latest); }
.pd-ui-font-demo i:nth-child(3) { color:var(--pd-feed-color-hot); }
.pd-ui-font-demo i:nth-child(4) { color:var(--pd-feed-color-good); }
.pd-ui-load { display:block; min-height:var(--pd-btn-h); margin:var(--pd-space-4) auto 0; padding-inline:var(--pd-btn-px-lg); border:1px solid var(--pd-ui-line); border-radius:var(--pd-btn-radius); background:var(--pd-ui-surface); color:var(--pd-ui-ink); font-size:var(--pd-fs-xs); }
.pd-ui-load[hidden] { display:none; }
.pd-ui-origin-note { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--pd-space-5); margin-top:var(--pd-space-5); padding:var(--pd-space-4); background:var(--pd-ui-surface); border:1px solid var(--pd-ui-line); border-radius:var(--pd-card-radius-lg); }
.pd-ui-origin-note p { color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-origin-note h3 { margin:0; font-size:var(--pd-fs-md); font-weight:var(--pd-fw-medium); }
.pd-ui-origin-note strong { font-weight:var(--pd-fw-medium); color:var(--pd-ui-ink); }
.pd-ui-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--pd-space-3); max-width:var(--pd-ui-max-width); margin:auto; padding:var(--pd-space-4); border-top:1px solid var(--pd-ui-line); color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-footer nav { display:flex; flex-wrap:wrap; gap:var(--pd-space-3); }
.pd-ui-footer a { color:var(--pd-ui-muted); }
.pd-ui-dialog { position:relative; width:min(calc(var(--pd-sidebar-width) * 3),calc(100vw - var(--pd-space-4))); max-height:calc(100vh - var(--pd-space-5)); padding:0; overflow:auto; background:var(--pd-ui-surface); color:var(--pd-ui-ink); border:1px solid var(--pd-ui-line); border-radius:var(--pd-card-radius-lg); }
.pd-ui-dialog::backdrop { background:#00000070; }
.pd-ui-dialog form { position:absolute; top:var(--pd-space-2); right:var(--pd-space-2); z-index:1; }
.pd-ui-close { display:grid; place-items:center; width:var(--pd-btn-h-sm); height:var(--pd-btn-h-sm); border:1px solid var(--pd-ui-line); border-radius:var(--pd-btn-radius); background:var(--pd-ui-surface); color:var(--pd-ui-ink); font-size:var(--pd-fs-lg); }
.pd-ui-detail-stage { display:flex; align-items:center; justify-content:center; min-height:calc(var(--pd-space-5) * 5); padding:var(--pd-space-4); border-bottom:1px solid var(--pd-ui-line); }
.pd-ui-detail-stage img { display:block; max-width:100%; max-height:calc(var(--pd-space-5) * 12); object-fit:contain; }
.pd-ui-dialog[data-category="icons"] .pd-ui-detail-stage img { width:calc(var(--pd-side-icon-art) * 2); }
.pd-ui-dialog[data-category="badges"] .pd-ui-detail-stage img { max-height:var(--pd-side-icon-art); }
.pd-ui-dialog[data-category="stamps"] .pd-ui-detail-stage img { max-width:calc(var(--pd-space-5) * 6); }
.pd-ui-dialog[data-category="emotes"] .pd-ui-detail-stage img { max-width:calc(var(--pd-space-5) * 6); }
.pd-ui-detail-copy { padding:var(--pd-space-4); }
.pd-ui-detail-copy h2 { margin:var(--pd-space-1) 0; font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); }
.pd-ui-detail-tags { color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-detail-note { font-size:var(--pd-fs-sm); color:var(--pd-ui-muted); }
.pd-ui-detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-space-3); padding-block:var(--pd-space-3); border-block:1px solid var(--pd-ui-line); font-size:var(--pd-fs-xs); }
.pd-ui-detail-meta dt { margin-bottom:calc(var(--pd-space-1) / 2); color:var(--pd-ui-muted); }
.pd-ui-detail-meta dd { margin:0; overflow-wrap:anywhere; }
.pd-ui-detail-links { display:flex; gap:var(--pd-space-3); font-size:var(--pd-fs-xs); }
.pd-ui-link-label { display:block; margin-top:var(--pd-space-3); color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-link-label input { display:block; width:100%; min-height:var(--pd-input-h); margin-top:var(--pd-space-1); padding:var(--pd-space-1); background:var(--pd-ui-soft); color:var(--pd-ui-ink); border:1px solid var(--pd-ui-line); border-radius:var(--pd-input-radius); font-size:var(--pd-fs-xs); }
.pd-ui-copy { min-height:var(--pd-btn-h-sm); margin-top:var(--pd-space-2); padding-inline:var(--pd-space-2); color:#fff; border:1px solid var(--pd-ui-blue); border-radius:var(--pd-btn-radius); background:var(--pd-ui-blue); font-size:var(--pd-fs-xs); }
.pd-ui-copy-result { margin-left:var(--pd-space-2); color:var(--pd-ui-muted); font-size:var(--pd-fs-xs); }
.pd-ui-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) { .pd-ui-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pd-ui-hero { gap:var(--pd-space-4); } }
@media (max-width:640px) {
    .pd-ui-topbar { padding:var(--pd-space-2) var(--pd-space-3); } .pd-ui-brand strong { font-size:var(--pd-fs-sm); } .pd-ui-topbar > nav { gap:var(--pd-space-2); } .pd-ui-topbar nav a:first-child { display:none; }
    .pd-ui-main { padding:var(--pd-space-4) var(--pd-space-3); } .pd-ui-hero { grid-template-columns:minmax(0,1fr); padding-block:var(--pd-space-2); } .pd-ui-hero h1 { font-size:var(--pd-fs-display); }
    .pd-ui-colors { gap:var(--pd-space-3); } .pd-ui-colors > span { width:100%; } .pd-ui-colors > div { width:calc(50% - var(--pd-space-3) / 2); }
    .pd-ui-grid { gap:var(--pd-space-2); } .pd-ui-asset-copy { padding:var(--pd-space-2); } .pd-ui-tags { flex-wrap:wrap; gap:calc(var(--pd-space-1) / 2); }
    .pd-ui-section-head > a { display:block; } .pd-ui-origin-note { grid-template-columns:minmax(0,1fr); gap:var(--pd-space-4); padding:var(--pd-space-3); } .pd-ui-footer { align-items:center; text-align:center; flex-direction:column; padding:var(--pd-space-4) var(--pd-space-3); } .pd-ui-footer nav { justify-content:center; }
    .pd-ui-detail-copy { padding:var(--pd-space-3); } .pd-ui-detail-meta { grid-template-columns:minmax(0,1fr); } .pd-ui-tabs button { padding-inline:var(--pd-space-1); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }