@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ground:#000;--surface:#0f0f0f;--chip:#1a1a1a;--line:#232323;--line-2:#3a3a3a;--ink:#fff;--ink-2:#c8c8c8;--muted:#8c8c8c;--sans:Inter,"Helvetica Neue",Arial,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--gut:20px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font:16px/1.5 var(--sans);padding:0 var(--gut);min-height:100vh}
a{color:var(--ink)}
ul{list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wm{position:absolute;z-index:2;left:max(20px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));display:block;width:131px;background:#000;padding:10px 8px 8px 11px}
.wm img{display:block;width:100%;height:auto}
main{max-width:1240px;margin:0 auto;padding-top:104px}
.intro{margin-bottom:24px}
h1{font-size:clamp(44px,8vw,88px);font-weight:800;letter-spacing:-.035em;line-height:.95;margin-bottom:12px}
.intro p{color:var(--ink-2);max-width:620px}
.bar{position:sticky;top:0;z-index:3;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:12px 0;margin:0 calc(var(--gut)*-1) 8px;padding-left:var(--gut);padding-right:var(--gut);border-bottom:1px solid var(--line)}
.seg{display:inline-flex;gap:2px;background:var(--chip);border-radius:10px;padding:3px;max-width:100%;overflow-x:auto}
.seg button{font:600 14px var(--sans);color:var(--ink-2);background:transparent;border:0;border-radius:8px;min-height:38px;padding:6px 16px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:#000}
.cnt{font:500 12px var(--mono);opacity:.7}
.empty{color:var(--muted);padding:48px 0}
h2{font-size:22px;font-weight:700;letter-spacing:-.01em;padding:28px 0 12px;border-top:1px solid var(--line)}
.shelf{margin-bottom:8px}
.shelf[hidden],.row[hidden],.feat[hidden]{display:none}
/* featured */
.feats{margin:16px 0 24px}
.feat-track{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.feat-track::-webkit-scrollbar{display:none}
.feat{position:relative;scroll-snap-align:start;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:radial-gradient(120% 60% at 50% 0%,#222 0,#0b0b0b 70%);display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.feat-link{position:absolute;inset:0;z-index:1}
.feat-bg{position:absolute;left:0;right:0;bottom:0;top:36%;width:100%;height:64%;object-fit:cover;object-position:center 34%;z-index:-1;transform:scale(1.01);transition:transform .5s}
.feat:hover .feat-bg{transform:scale(1.04)}
.feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 62%,rgba(0,0,0,.9) 100%)}
.feat-top{padding:22px 22px 0}
.eyebrow{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.feat h3{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin-top:6px;max-width:14ch}
.feat-bot{display:flex;align-items:center;gap:12px;padding:16px 18px;margin:0 10px 10px;border-radius:16px;background:rgba(20,20,20,.62);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.feat-bot .row-act,.row-act{position:relative;z-index:2}
/* rows */
.rows{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-auto-columns:88%;column-gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.rows::-webkit-scrollbar{display:none}
.row{display:flex;align-items:center;gap:12px;scroll-snap-align:start;min-width:0;border-bottom:1px solid var(--line)}
.row-main{display:flex;align-items:center;gap:14px;flex:1;min-width:0;text-decoration:none;padding:10px 0}
.row-act{display:flex;align-items:center;gap:6px;flex:none}
.ic{border-radius:22.5%;flex:none;display:block}
.row-main .ic{width:64px;height:64px}
.row-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.row-t b{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-t span{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.get{display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--chip);color:var(--ink);font:700 14px var(--sans);text-decoration:none;letter-spacing:.01em}
.get:hover{background:#2a2a2a}
.feat .get{background:var(--ink);color:#000}
.fav{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:var(--muted);border-radius:50%}
.fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:transform .15s}
.fav:hover{color:var(--ink)}
.fav[aria-pressed="true"]{color:var(--ink)}
.fav[aria-pressed="true"] svg{fill:currentColor}
.fav:active svg{transform:scale(.85)}
/* detail */
.detail{max-width:980px}
.back{display:inline-block;font:13px var(--mono);color:var(--ink-2);text-decoration:none;margin-bottom:20px}
.back::before{content:"‹ "}
.back:hover{color:var(--ink)}
.app-head{display:flex;gap:20px;align-items:center}
.ic.xl{width:112px;height:112px}
.app-t h1{font-size:clamp(28px,5vw,44px);margin-bottom:2px;letter-spacing:-.025em}
.sub{color:var(--muted);margin-bottom:12px}
.fav.big{width:44px;height:44px;background:var(--chip)}
.app-t .get{background:var(--ink);color:#000}
.strip{display:flex;margin:28px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.strip li{flex:1;min-width:120px;padding:12px 14px;text-align:center;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.strip li:first-child{border-left:0}
.strip span{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.strip b{font-weight:600;font-size:15px;color:var(--ink-2);white-space:nowrap}
.shots{margin:24px calc(var(--gut)*-1) 8px}
.shots ul{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 8px;scrollbar-width:thin}
.shots li{scroll-snap-align:start;flex:none}
.shots img{display:block;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.shots img.tall{height:min(520px,70vh);width:auto;aspect-ratio:9/16}
@media (max-width:767px){.shots img.tall{height:auto;width:min(62vw,300px)}}
.shots img.wide{width:min(calc(100vw - 2*var(--gut) - 24px),756px);height:auto;aspect-ratio:16/11}
.about{max-width:680px;margin-top:20px}
.about p{color:var(--ink-2);margin-bottom:12px}
.about .lead{color:var(--ink);font-size:18px;font-weight:500}
.feats-list ul{display:grid;gap:8px;max-width:680px;padding-bottom:8px}
.feats-list li{color:var(--ink-2);padding-left:22px;position:relative}
.feats-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.info dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 24px;padding-bottom:8px}
.info dl div{padding:10px 0;border-bottom:1px solid var(--line)}
.info dt{font-size:13px;color:var(--muted)}
.info dd{color:var(--ink)}
footer.site{max-width:1240px;margin:96px auto 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:32px 0 max(32px,env(safe-area-inset-bottom));font:13px var(--sans);color:var(--ink)}
footer.site a{color:var(--ink);text-decoration:none}
footer.site a:hover,footer.site a:focus-visible{text-decoration:underline}
@media (max-width:767px){
  .rows .get.view,.feat .get.view{display:none}
  .row-main .ic{width:56px;height:56px}
  .fav{width:40px;height:40px}
  .feat-bot .row-t span,.feat .fav{display:none}
}
@media (min-width:768px){
  :root{--gut:56px}
  .wm{left:56px;top:28px;width:139px}
  main{padding-top:128px}
  .feat-track{grid-auto-columns:calc((100% - 32px)/3)}
  .rows{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .ic.xl{width:128px;height:128px}
}
@media (min-width:768px) and (max-width:1100px){.feat-track{grid-auto-columns:46%}.rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.feat-bg,.fav svg{transition:none}.feat:hover .feat-bg{transform:scale(1.01)}}
@media (min-width:768px){.detail .rows{grid-template-columns:repeat(2,minmax(0,1fr))}}