:root{
  --fg:#111; --muted:#666; --bg:#fafafa; --card:#fff; --line:#eee;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg)}
.ph-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#fff,rgba(255,255,255,0.9));backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid var(--line);padding:14px 16px}
.ph-title{font-weight:700;font-size:20px}
.ph-sub{font-size:12px;color:var(--muted)}
.ph-app{display:flex;flex-direction:column;gap:18px;padding:14px}
.ph-lane{display:flex;flex-direction:column;gap:10px}
.ph-lane-head{display:flex;align-items:center;justify-content:space-between}
.ph-lane h2{margin:0;font-size:18px}
.ph-actions button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 8px;cursor:pointer}
.ph-row{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px}
@media(min-width:520px){.ph-row{grid-auto-columns:48%}}
@media(min-width:920px){.ph-row{grid-auto-columns:32%}}
@media(min-width:1280px){.ph-row{grid-auto-columns:24%}}
@media(max-width: 640px) {
  .ph-card {
    flex: 0 0 84vw;
  }
}
.ph-scroll{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.ph-scroll > *{scroll-snap-align:start}
.ph-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-height:220px}
.ph-thumb{display:block;position:relative;aspect-ratio:16/9;background:#ddd;text-decoration:none}
.ph-thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.ph-meta{padding:12px;display:flex;flex-direction:column;gap:6px}
.ph-card-title{margin:0 0 2px 0;font-size:16px;line-height:1.25}
.ph-titlelink{color:inherit;text-decoration:none}
.ph-card-sub{font-size:12px;color:var(--muted)}
.ph-tags{display:flex;flex-wrap:wrap;gap:6px}
.ph-tag{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 6px;color:var(--muted)}


#ph-modal{border:none;border-radius:16px;padding:0;width:min(920px,96vw)}
#ph-modal::backdrop{background:rgba(0,0,0,.25)}
.ph-modal-article header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 12px}
.ph-modal-body{padding:12px;max-height:min(70vh,720px);overflow:auto;color:#222}
#ph-modal-close{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 8px;cursor:pointer}


.ph-scroll{mask-image:linear-gradient(90deg,transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)}


.ph-scroll{touch-action:pan-x pan-y pinch-zoom}
.ph-scroll{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

:root { --lane-gutter: 17px; }


.ph-row.ph-scroll{
  padding-inline: var(--lane-gutter);
  scroll-padding-inline: var(--lane-gutter);
}


.ph-scroll{
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--lane-gutter),
    #000 calc(100% - var(--lane-gutter)),
    transparent 100%
  );
}


.ph-row{ scroll-snap-type: x mandatory; }
.ph-card{ scroll-snap-align: start; scroll-snap-stop: always; }


.ph-row {
  scroll-snap-type: x mandatory;
}

.ph-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


.ph-skel{animation:phPulse 1.2s ease-in-out infinite;background:linear-gradient(90deg,#eee,#f5f5f5,#eee);background-size:200% 100%}
@keyframes phPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}