.phs__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(20px,2.4vw,36px);align-items:start}
.phs__list{display:flex;flex-direction:column;gap:10px}
.phs__tab{display:flex;align-items:center;gap:22px;width:100%;text-align:left;padding:20px 24px;border-radius:14px;border:1px solid var(--mist);background:var(--w);color:var(--k);font:inherit;font-weight:700;font-size:18px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.bg-white .phs__tab{background:var(--cloud);border-color:transparent}
.phs__tab:hover{border-color:var(--k)}
.phs__n{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--stone);font-variant-numeric:tabular-nums;min-width:22px}
.phs__tab[aria-selected="true"]{border-color:var(--k);background:var(--y)}
.phs__tab[aria-selected="true"] .phs__n{color:var(--k)}
.phs__panel{position:relative;border-radius:24px;padding:clamp(28px,3.4vw,52px);background:var(--w);border:1px solid var(--mist);overflow:hidden}
.bg-white .phs__panel{background:var(--cloud);border-color:transparent}
.phs__panel+.phs__panel{margin-top:16px}
.phs__meta{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.phs__meta b{color:inherit;font-variant-numeric:tabular-nums}
.phs__tag{color:var(--k);background:var(--y);padding:5px 12px;border-radius:999px;letter-spacing:.08em;font-size:12px}
.phs__bar{display:flex;gap:8px;margin:22px 0 32px}
.phs__bar:empty{display:none}
.phs__bar span{flex:1;height:4px;border-radius:4px;background:var(--mist);transition:background .4s}
.phs__bar span.on{background:var(--k)}
.phs__h{font-size:clamp(28px,3vw,44px);line-height:1.1;margin:0 0 14px}
.phs__sub{font-weight:700;font-size:clamp(18px,1.4vw,21px);margin:0 0 14px;color:var(--k)}
.phs__text{color:var(--g);max-width:62ch;margin:0}
.phs__bl{white-space:pre-line;margin-top:28px;color:var(--g)}
.phs__checks{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:12px}
.phs__checks li{position:relative;padding-left:30px;font-weight:500}
.phs__checks li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--k)}
/* black */
.bg-black .phs__tab{background:#111;border-color:#262626;color:var(--w)}
.bg-black .phs__tab:hover{border-color:#555}
.bg-black .phs__n{color:#777}
.bg-black .phs__tab[aria-selected="true"]{background:#1b1a12;border-color:var(--y);color:var(--w)}
.bg-black .phs__tab[aria-selected="true"] .phs__n{color:var(--y)}
.bg-black .phs__panel{background:radial-gradient(120% 90% at 0% 0%,rgba(255,218,3,.10),rgba(255,218,3,0) 55%),#101010;border-color:rgba(255,218,3,.35);color:#e9e9e9}
.bg-black .phs__meta{color:#8f8f8f}
.bg-black .phs__tag{background:transparent;color:var(--y);padding:0;font-size:14px}
.bg-black .phs__bar span{background:#2e2e2e}
.bg-black .phs__bar span.on{background:var(--y)}
.bg-black .phs__h{color:var(--w)}
.bg-black .phs__sub{color:var(--y)}
.bg-black .phs__text,.bg-black .phs__bl{color:#bdbdbd}
.bg-black .phs__checks li{color:#e9e9e9}
.bg-black .phs__checks li::before{color:var(--y)}
/* yellow */
.bg-yellow .phs__tab,.bg-yellow .phs__panel{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.15)}
.bg-yellow .phs__tab[aria-selected="true"]{background:var(--k);color:var(--w);border-color:var(--k)}
.bg-yellow .phs__tab[aria-selected="true"] .phs__n{color:var(--y)}
.bg-yellow .phs__tag{background:var(--k);color:var(--y)}
.bg-yellow .phs__bar span{background:rgba(0,0,0,.15)}
.bg-yellow .phs__meta,.bg-yellow .phs__n{color:#5a5000}
/* js mode */
.phs.is-js .phs__panel{display:none;margin-top:0}
.phs.is-js .phs__panel.is-on{display:block;animation:phs-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes phs-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phs:not(.is-js) .phs__list{display:none}
.phs:not(.is-js) .phs__grid{grid-template-columns:1fr}
@media (max-width:900px){
.phs__grid{grid-template-columns:1fr}
.phs__list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 4px;scrollbar-width:none}
.phs__list::-webkit-scrollbar{display:none}
.phs__tab{flex:0 0 auto;width:auto;max-width:78vw;scroll-snap-align:start;padding:14px 18px;gap:12px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.phs.is-js .phs__panel.is-on{animation:none}.phs__bar span{transition:none}}