*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;background:var(--pc-page);scroll-behavior:smooth}
body{margin:0;background:var(--pc-page);color:var(--pc-text);font-family:var(--pc-font-han);font-size:var(--pc-han-md);line-height:1.65}
button,input,textarea{font:inherit}
button,a,[role="button"]{touch-action:manipulation}
img{max-width:100%}
::selection{background:var(--pc-action);color:var(--pc-ink)}
:focus-visible{outline:3px solid var(--pc-focus);outline-offset:2px}

.pcx-bit{font-family:var(--pc-font-bit);font-weight:400;letter-spacing:.02em}
.pcx-label{font-family:var(--pc-font-bit);font-size:var(--pc-bit-sm);letter-spacing:.06em;color:var(--pc-text-muted)}
.pcx-muted{color:var(--pc-text-muted)}
.pcx-hidden{display:none!important}

.pcx-plate{background:var(--pc-surface);border:var(--pc-border) solid;border-color:var(--pc-highlight) var(--pc-shadow) var(--pc-shadow) var(--pc-highlight)}
.pcx-slot{background:var(--pc-field);border:var(--pc-border) solid;border-color:var(--pc-shadow) var(--pc-highlight) var(--pc-highlight) var(--pc-shadow)}
.pcx-pressable:active,.pcx-pressable.is-pressed{transform:translate3d(1px,1px,0);border-color:var(--pc-shadow) var(--pc-highlight) var(--pc-highlight) var(--pc-shadow)}

.pcx-pxr{position:relative}
.pcx-pxr::after{content:"";position:absolute;inset:calc(var(--pc-border) * -1);z-index:4;pointer-events:none;background:linear-gradient(var(--pc-page),var(--pc-page)) 0 0/var(--pc-corner) var(--pc-corner) no-repeat,linear-gradient(var(--pc-page),var(--pc-page)) 100% 0/var(--pc-corner) var(--pc-corner) no-repeat,linear-gradient(var(--pc-page),var(--pc-page)) 0 100%/var(--pc-corner) var(--pc-corner) no-repeat,linear-gradient(var(--pc-page),var(--pc-page)) 100% 100%/var(--pc-corner) var(--pc-corner) no-repeat}

.pcx-divider{display:flex;align-items:center;gap:var(--pc-space-2);margin:var(--pc-space-4) 0;color:var(--pc-text-muted);font-family:var(--pc-font-bit);font-size:var(--pc-bit-xs);letter-spacing:.04em;text-align:center}
.pcx-divider::before,.pcx-divider::after{content:"";height:2px;flex:1;background:linear-gradient(to bottom,var(--pc-shadow) 0 50%,var(--pc-highlight) 50%)}
.pcx-divider--plain{height:0;border:0;border-top:1px solid var(--pc-shadow);border-bottom:1px solid var(--pc-highlight)}

.pcx-shell{width:min(100% - 32px,1400px);margin-inline:auto;padding-block:var(--pc-space-6) var(--pc-space-12)}
.pcx-catalog-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--pc-space-5);align-items:start}
.pcx-catalog-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pc-space-5)}
.pcx-catalog-main>*{min-width:0}
.pcx-catalog-grid>nav{position:sticky;top:var(--pc-space-4)}
.pcx-catalog-grid>nav a{display:block;min-height:36px;padding:7px 8px;color:var(--pc-text);text-decoration:none;border-left:4px solid transparent}
.pcx-catalog-grid>nav a:hover,.pcx-catalog-grid>nav a:focus{background:var(--pc-surface-raised);border-left-color:var(--pc-action)}
.pcx-catalog-brand{display:flex;align-items:center;gap:var(--pc-space-3);margin-bottom:var(--pc-space-3)}
.pcx-catalog-brand img{width:150px;height:auto;image-rendering:pixelated}
.pcx-catalog-badges{display:flex;gap:var(--pc-space-2);flex-wrap:wrap;margin-top:var(--pc-space-3)}
.pcx-section{min-width:0;scroll-margin-top:var(--pc-space-6)}
.pcx-section__head{display:flex;align-items:center;gap:var(--pc-space-2);padding:10px var(--pc-space-3);border-bottom:var(--pc-border) solid var(--pc-shadow)}
.pcx-section__head h2{margin:0;font-size:var(--pc-han-lg)}
.pcx-section__body{min-width:0;padding:var(--pc-space-4)}
.pcx-section pre{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.pcx-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pc-space-4)}
.pcx-dashboard-demo{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--pc-space-4);align-items:start}
.pcx-dashboard-demo__content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pc-space-3)}
.pcx-dashboard-demo__statuses{display:flex;justify-content:space-around;gap:var(--pc-space-3)}

@media (max-width:760px){
  .pcx-shell{width:min(100% - 24px,1400px);padding-top:var(--pc-space-3)}
  .pcx-catalog-grid{grid-template-columns:minmax(0,1fr)}
  .pcx-catalog-grid>nav{position:static}
  .pcx-demo-grid{grid-template-columns:1fr}
  .pcx-dashboard-demo{grid-template-columns:minmax(0,1fr)}
  .pcx-dashboard-demo__content{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:390px){
  .pcx-shell{width:min(100% - 16px,1400px)}
  .pcx-section__body{padding:var(--pc-space-3)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}