:root{
  --gp-bg:#08090c;
  --gp-surface:#111319;
  --gp-surface-2:#161920;
  --gp-line:rgba(255,255,255,.085);
  --gp-line-strong:rgba(255,255,255,.16);
  --gp-text:rgba(255,255,255,.94);
  --gp-soft:rgba(255,255,255,.64);
  --gp-muted:rgba(255,255,255,.42);
  --gp-accent:#8f3438;
  --gp-ease:cubic-bezier(.16,1,.3,1);
}
.ghost-page{
  width:min(1180px,100%);
  margin:0 auto;
  padding:clamp(28px,5vw,58px) clamp(12px,2.4vw,22px) 126px;
  color:var(--gp-text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"PingFang SC",sans-serif;
}
.gp-top{display:grid;gap:8px;margin-bottom:16px}
.gp-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.gp-title-block{position:relative;min-width:0;padding-left:16px}
.gp-title-block.gp-stats-only{padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none}
.gp-title-block::before{position:absolute;inset:2px auto 1px 0;width:2px;border-radius:2px;background:linear-gradient(180deg,#b14b50,var(--gp-accent) 62%,rgba(143,52,56,.12));content:""}
.gp-kicker{display:block;margin-bottom:7px;color:rgba(255,255,255,.32);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;font-weight:650;letter-spacing:.2em}
.gp-title{margin:0;color:#fff;font-size:clamp(1.72rem,4.7vw,2.42rem);font-weight:650;letter-spacing:-.055em;line-height:1.05}
.gp-title-block.gp-stats-only::before{display:none!important;content:none!important}
.gp-stats-only .gp-archive-meta{margin-top:0}
.gp-archive-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;color:var(--gp-muted);font-size:.76rem;line-height:1.35}
.gp-archive-meta-inline{min-width:0;margin:0;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none;white-space:nowrap}
.gp-archive-meta strong{color:var(--gp-soft);font-weight:680;font-variant-numeric:tabular-nums}
.gp-archive-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.27)}
.gp-tools{position:relative;z-index:30}
.gp-searchbar{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;min-height:54px;padding:5px 6px 5px 11px;border:1px solid var(--gp-line);border-radius:999px;background:rgba(13,15,20,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 16px 42px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%)}
.gp-search-icon{display:grid;place-items:center;color:rgba(255,255,255,.38)}
.gp-search-icon svg{width:20px;height:20px;fill:currentColor}
.gp-search-input{min-width:0;width:100%;height:40px;padding:0 8px;border:0;outline:0;background:transparent;color:#fff;font-size:.94rem;-webkit-appearance:none;appearance:none}
.gp-search-input::-webkit-search-cancel-button{display:none}
.gp-search-input::placeholder{color:rgba(255,255,255,.36)}
.gp-search-clear,.gp-filter-trigger{display:inline-grid;place-items:center;height:40px;border:0;color:rgba(255,255,255,.72);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.gp-search-clear{width:40px;border-radius:50%;background:transparent}
.gp-search-clear svg{width:17px;height:17px;fill:currentColor}
.gp-search-clear:hover{background:rgba(255,255,255,.055);color:#fff}
.gp-search-clear[hidden]{display:none}
.gp-filter{position:relative}
.gp-filter-trigger{grid-template-columns:auto 14px;gap:7px;min-width:84px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.055);font-size:.79rem;font-weight:680;white-space:nowrap}
.gp-filter-trigger svg{width:13px;height:13px;fill:currentColor;transition:transform .18s var(--gp-ease)}
.gp-filter.open .gp-filter-trigger svg{transform:rotate(180deg)}
.gp-filter-menu{position:absolute;top:calc(100% + 8px);right:0;display:grid;gap:3px;min-width:136px;padding:6px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(15,17,23,.97);box-shadow:0 22px 56px rgba(0,0,0,.54);opacity:0;visibility:hidden;transform:translate3d(0,-6px,0) scale(.985);transform-origin:top right;transition:opacity .16s ease,visibility .16s ease,transform .2s var(--gp-ease);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.gp-filter.open .gp-filter-menu{opacity:1;visibility:visible;transform:none}
.gp-filter-option{min-height:40px;padding:0 12px;border:0;border-radius:14px;background:transparent;color:rgba(255,255,255,.58);text-align:left;font-size:.82rem;font-weight:620;cursor:pointer}
.gp-filter-option:hover,.gp-filter-option.active{background:rgba(255,255,255,.075);color:#fff}
.gp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gp-catalog-frame{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.gp-card{
  --gp-level:#777d89;
  position:relative;
  display:block;
  min-width:0;
  overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.16);
  border-radius:17px;
  background:var(--gp-surface);
  color:inherit;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  contain:layout paint style;
  content-visibility:auto;
  contain-intrinsic-size:240px 300px;
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:transform .25s var(--gp-ease),border-color .2s ease,box-shadow .25s var(--gp-ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.gp-card::before{position:absolute;z-index:4;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent 4%,var(--gp-level) 34%,var(--gp-level) 70%,transparent 96%);opacity:.62;content:"";transform:scaleY(.78);transform-origin:center;transition:opacity .2s ease,transform .32s var(--gp-ease)}
.gp-card-media{position:absolute;inset:0;overflow:hidden;background:#101116}
.gp-card-img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transition:transform .48s var(--gp-ease),filter .28s ease}
.gp-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,8,.42) 0,transparent 24%,transparent 49%,rgba(4,5,8,.35) 68%,rgba(4,5,8,.97) 100%);pointer-events:none}
.gp-card-top{position:absolute;z-index:3;top:11px;right:11px;left:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.gp-card-code{overflow:hidden;color:rgba(255,255,255,.48);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.56rem;font-weight:700;letter-spacing:.11em;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.58)}
.gp-card-level{display:grid;place-items:center;min-width:31px;height:25px;padding:0 7px;border:1px solid color-mix(in srgb,var(--gp-level) 72%,transparent);border-radius:8px;background:rgba(7,8,12,.62);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gp-card-copy{position:absolute;z-index:3;right:12px;bottom:12px;left:13px;display:grid;gap:5px;min-width:0}
.gp-card-source{color:var(--gp-level);font-size:.58rem;font-weight:740;letter-spacing:.12em;text-transform:uppercase}
.gp-card-name{overflow:hidden;color:#fff;font-size:clamp(.94rem,3.7vw,1.12rem);font-weight:680;letter-spacing:-.035em;line-height:1.15;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.gp-card-rule{display:-webkit-box;overflow:hidden;color:rgba(255,255,255,.58);font-size:.68rem;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.gp-card.level-X{--gp-level:#7787d9}.gp-card.level-Splus{--gp-level:#bd5960}.gp-card.level-S{--gp-level:#a7444a}.gp-card.level-A{--gp-level:#b39a67}.gp-card.level-B{--gp-level:#7f8996}.gp-card.level-C{--gp-level:#626975}
@media(hover:hover) and (pointer:fine){
  .gp-card:hover{z-index:2;border-color:rgba(255,255,255,.18);box-shadow:0 22px 48px rgba(0,0,0,.42);transform:translate3d(0,-4px,0)}
  .gp-card:hover::before{opacity:1;transform:scaleY(1)}
  .gp-card:hover .gp-card-img{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}
}
.gp-card:active{transform:scale(.985)}
.gp-empty{grid-column:1/-1;display:grid;place-items:center;min-height:220px;padding:36px 20px;border:1px solid var(--gp-line);border-radius:18px;background:rgba(17,19,25,.62);color:var(--gp-muted);font-size:.88rem}
.gp-empty[hidden],.gp-load-sentinel[hidden]{display:none!important}
.gp-load-sentinel{grid-column:1/-1;display:grid;place-items:center;min-height:70px;color:rgba(255,255,255,.4);font-size:.76rem;cursor:pointer}
.gp-loader{width:24px;height:24px;border:2px solid rgba(255,255,255,.11);border-top-color:rgba(255,255,255,.82);border-radius:50%;animation:gpSpin .7s linear infinite}
@keyframes gpSpin{to{transform:rotate(360deg)}}
@media(min-width:660px){.gp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.gp-card{border-radius:19px}.gp-card-rule{font-size:.72rem}}
@media(min-width:1020px){.gp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.gp-top{margin-bottom:22px}.gp-card-copy{right:15px;bottom:15px;left:16px}}
@media(max-width:480px){.ghost-page{padding-right:8px;padding-left:8px}.gp-title-row{align-items:flex-start}.gp-kicker{font-size:.59rem}.gp-archive-meta-inline{padding-left:2px;font-size:.74rem}.gp-searchbar{grid-template-columns:28px minmax(0,1fr) auto auto;min-height:54px;padding-left:9px}.gp-filter-trigger{min-width:74px;padding-inline:10px}.gp-grid{gap:9px}.gp-card{border-radius:15px}.gp-card-top{top:9px;right:9px;left:10px}.gp-card-copy{right:10px;bottom:10px;left:11px}.gp-card-rule{-webkit-line-clamp:1}.gp-card-source{font-size:.53rem}}
@supports not (color:color-mix(in srgb,#fff 50%,transparent)){.gp-card-level{border-color:rgba(255,255,255,.22)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gp-searchbar,.gp-filter-menu{background:#111319}.gp-card-level{background:rgba(7,8,12,.9)}}
@media(prefers-reduced-motion:reduce){.ghost-page .gp-card,.ghost-page .gp-card::before,.ghost-page .gp-card-img,.ghost-page .gp-filter-menu,.ghost-page .gp-filter-trigger svg{animation:none!important;transition:none!important}}

@media(max-width:700px){
  .gp-top{gap:7px}
  .gp-searchbar{border-radius:999px;-webkit-backdrop-filter:blur(10px) saturate(115%);backdrop-filter:blur(10px) saturate(115%)}
  .gp-filter-trigger{border-radius:999px}
  .gp-card{box-shadow:0 8px 22px rgba(0,0,0,.22)}
}
@media(prefers-reduced-transparency:reduce){.gp-searchbar,.gp-filter-menu{background:#111319;-webkit-backdrop-filter:none;backdrop-filter:none}}
