:root{--bg:#eef0fb;--fg:#1d1b2e;--acc:#6b4cff;--dim:rgba(29,27,46,.12);--heart:#ff5c8a;--gbg:rgba(255,255,255,.55);--gline:rgba(255,255,255,.9);--gblur:24px;--segon:#fff}
.glass{box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(80,70,160,.12)}
#app{position:fixed;inset:0;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;will-change:transform;animation:drift 18s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:60vw;height:60vw;left:-15vw;top:-8vh;background:#cdbdff}.blobs i:nth-child(2){width:55vw;height:55vw;right:-20vw;top:30vh;background:#ffcdbd;animation-delay:-6s}.blobs i:nth-child(3){width:60vw;height:60vw;left:10vw;bottom:-15vh;background:#b9f1e1;animation-delay:-11s}
@keyframes drift{to{transform:translate3d(8vw,6vh,0) scale(1.15)}}
.scroll{position:absolute;inset:0;overflow-y:auto;padding:calc(76px + env(safe-area-inset-top)) 12px calc(100px + env(safe-area-inset-bottom));scrollbar-width:none;overscroll-behavior:contain}.scroll::-webkit-scrollbar{display:none}
.cols{display:flex;gap:12px;align-items:flex-start}.col{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;align-content:start}
.tile{border-radius:26px;padding:6px;cursor:pointer;animation:up .6s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}.tile:active{transform:scale(.96)}
@keyframes up{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.ph{position:relative;border-radius:21px;overflow:hidden;background:linear-gradient(135deg,#e3defa,#fbe3dc)}.ph img{width:100%;height:100%;object-fit:cover}
.tile .meta{padding:9px 8px 6px;display:flex;align-items:center;gap:6px}.tile h3{font-size:15px;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile small{font-size:11px;opacity:.55;display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .dot{font-size:15px;color:var(--heart);flex:none}
.top{position:absolute;z-index:10;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;display:flex;align-items:center;gap:10px}
.top::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg) 40%,transparent);opacity:.85;pointer-events:none}
.top>*{position:relative}.logo{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--acc)}.top .pill-search{flex:1}
.fdock{position:absolute;z-index:10;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,380px);padding:5px;border-radius:999px}
.fdock .seg{padding:0}.fdock .seg button{padding:12px 4px;opacity:.6}.fdock .seg button.on{box-shadow:0 4px 14px rgba(80,70,160,.18);color:var(--acc);opacity:1}
.sentinel{height:1px}
/* detail */
.detail{position:absolute;inset:0;z-index:20;display:none;overflow-y:auto;background:rgba(238,240,251,.7);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.detail.on{display:block;animation:fade .35s both}@keyframes fade{from{opacity:0}to{opacity:1}}
.detail .hero{position:relative;margin:calc(10px + env(safe-area-inset-top)) 10px 0;height:52vh;border-radius:34px;overflow:hidden;background:#ddd}.hero img{width:100%;height:100%;object-fit:cover}
.hero .btn{position:absolute;top:12px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px}.hero .l{left:12px}.hero .r{right:12px;font-size:22px}
.sheet{position:relative;margin:-34px 10px 24px;padding:22px 20px 26px;border-radius:30px;display:grid;gap:16px;animation:sheet .7s .1s cubic-bezier(.2,.9,.2,1) both}@keyframes sheet{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.sheet h1{font-size:32px;letter-spacing:-.03em;line-height:1.05}.sheet .sub{opacity:.55;font-size:14px;margin-top:4px}
.sheet p{font-size:14.5px;line-height:1.55;opacity:.8}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.facts div{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.65);border:1px solid #fff}.facts small{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;opacity:.5}.facts b{font-size:15px}
.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{padding:6px 12px;border-radius:99px;font-size:13px;background:rgba(107,76,255,.1);color:#4a33c8;font-weight:600}
.bar{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}