.pd-utility-page { margin:0; background:#f3f5f8; color:#253042; font-family:var(--pd-font-system); font-size:var(--pd-fs-sm); }
.pd-utility-page * { box-sizing:border-box; }
.pd-utility-main { max-width:var(--pd-page-max-width); margin:auto; padding:var(--pd-space-5) var(--pd-space-4); }
.pd-utility-main > header > span { color:var(--pd-sidebar-art-blue); font-weight:var(--pd-fw-semibold); }
.pd-utility-main h1 { font-size:var(--pd-fs-display); font-weight:var(--pd-fw-semibold); margin:var(--pd-space-2) 0; }
.pd-utility-main p { color:#697386; line-height:var(--pd-lh-relaxed); }
.pd-utility-main a { color:var(--pd-sidebar-art-blue); }
.pd-utility-main nav, .pd-utility-download { display:flex; gap:var(--pd-space-3); }
.pd-utility-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--pd-space-3); margin-block:var(--pd-space-4); }
.pd-utility-grid article { min-width:0; background:#fff; padding:var(--pd-space-3); border-radius:var(--pd-radius-lg); }
.pd-utility-art { display:grid; place-items:center; padding:var(--pd-space-3); background:#f3f5f8; border-radius:var(--pd-radius-md); }
.pd-utility-art img { width:calc(var(--pd-icon-xl)*2); height:calc(var(--pd-icon-xl)*2); }
.pd-utility-grid h2 { font-size:var(--pd-fs-sm); font-weight:var(--pd-fw-semibold); margin:var(--pd-space-3) 0 var(--pd-space-1); }
.pd-utility-grid p { font-size:var(--pd-fs-xs); margin:0 0 var(--pd-space-3); }
.pd-utility-sizes { display:flex; gap:var(--pd-space-1); align-items:center; height:var(--pd-space-5); }
.pd-utility-sizes img { flex:none; }
.pd-utility-size-16 { width:var(--pd-icon-md); height:var(--pd-icon-md); }
.pd-utility-size-20 { width:var(--pd-icon-lg); height:var(--pd-icon-lg); }
.pd-utility-size-24 { width:var(--pd-icon-xl); height:var(--pd-icon-xl); }
.pd-utility-size-32 { width:var(--pd-space-5); height:var(--pd-space-5); }
.pd-utility-size-note { display:block; font-size:var(--pd-fs-3xs); color:#697386; margin:var(--pd-space-1) 0 var(--pd-space-3); }
.pd-utility-download { font-size:var(--pd-fs-xs); }
.pd-utility-surface, .pd-utility-interaction { margin-block:var(--pd-space-4); padding:var(--pd-space-4); border-radius:var(--pd-radius-lg); background:#fff; }
.pd-utility-surface h2, .pd-utility-interaction h2 { font-size:var(--pd-fs-md); font-weight:var(--pd-fw-semibold); margin:0 0 var(--pd-space-3); }
.pd-utility-surface-dark { color:#eef2f8; background:#252a32; }
.pd-utility-strip { display:flex; flex-wrap:wrap; gap:var(--pd-space-4); }
.pd-utility-strip > div { display:flex; align-items:center; gap:var(--pd-space-1); }
.pd-utility-strip img { width:var(--pd-icon-xl); height:var(--pd-icon-xl); flex:none; }
.pd-utility-strip span { font-size:var(--pd-fs-xs); }
.pd-utility-footer-mock { display:flex; justify-content:space-between; align-items:center; gap:var(--pd-space-3); flex-wrap:wrap; background:#252a32; color:#e6ecf5; padding:var(--pd-space-3); border-radius:var(--pd-radius-md); }
.pd-utility-footer-mock > div { display:flex; gap:var(--pd-space-1); }
.pd-utility-footer-mock button { display:grid; place-items:center; width:var(--pd-btn-h); height:var(--pd-btn-h); padding:0; border:0; border-radius:var(--pd-radius-sm); background:transparent; cursor:pointer; }
.pd-utility-footer-mock button img { display:block; width:var(--pd-icon-lg); height:var(--pd-icon-lg); filter:grayscale(1); opacity:.72; transition:filter .15s ease,opacity .15s ease; }
.pd-utility-footer-mock button:is(:hover,:focus-visible) img { filter:none; opacity:1; }
.pd-utility-footer-mock button.is-copied img { filter:none; opacity:1; }
.pd-utility-footer-mock button:hover { background:#ffffff16; }
.pd-utility-footer-mock button:focus-visible { outline:var(--pd-tab-indicator) solid #fff; outline-offset:var(--pd-tab-indicator); }
.pd-utility-result { font-size:var(--pd-fs-xs); }
.pd-utility-main > footer { font-size:var(--pd-fs-xs); color:#697386; line-height:var(--pd-lh-relaxed); }
@media(max-width:1100px) { .pd-utility-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:540px) { .pd-utility-main { padding:var(--pd-space-4) var(--pd-space-3); } .pd-utility-main h1 { font-size:var(--pd-fs-xl); } .pd-utility-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-space-2); } .pd-utility-grid article { padding:var(--pd-space-2); } .pd-utility-surface, .pd-utility-interaction { padding:var(--pd-space-3); } }