.crail{padding:22px var(--gutter) 26px}.crail-viewport{position:relative}.crail-viewport:after,.crail-viewport:before{content:"";position:absolute;top:0;bottom:0;width:56px;pointer-events:none;z-index:2;opacity:0;transition:opacity var(--t-base)}.crail-viewport:before{left:0;background:linear-gradient(90deg,var(--bg) 20%,transparent)}.crail-viewport:after{right:0;background:linear-gradient(270deg,var(--bg) 20%,transparent)}.crail-viewport.has-left:before,.crail-viewport.has-right:after{opacity:1}.crail-track{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px 6px;scroll-snap-type:x proximity}.crail-track::-webkit-scrollbar{display:none}.crail-card{position:relative;flex:0 0 auto;scroll-snap-align:start;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;min-width:194px;max-width:260px;padding:12px 14px 15px;border-radius:16px;border:1px solid var(--br);background:var(--surface);cursor:pointer;text-align:left;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}.crail-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--red) 45%,transparent);box-shadow:0 12px 28px -18px var(--red-glow)}.crail-card:active{transform:translateY(0)}.crail-ill{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--surface-2,rgba(0,0,0,.05));color:var(--ink-3);transition:background var(--t-fast),color var(--t-fast)}.crail-ill svg{width:22px;height:22px;display:block}.crail-tx{min-width:0;display:block}.crail-tx b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25;overflow:hidden;text-overflow:ellipsis}.crail-tx b,.crail-tx em{display:block;white-space:nowrap}.crail-tx em{margin-top:2px;font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}.crail-chev{color:var(--ink-3);display:grid;place-items:center;transition:transform var(--t-fast),color var(--t-fast)}.crail-chev.up{transform:rotate(180deg)}.crail-bar{position:absolute;left:14px;right:14px;bottom:9px;height:2px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}.crail-bar i{display:block;height:100%;border-radius:inherit;background:color-mix(in srgb,var(--ink) 26%,transparent);transition:background var(--t-base),width var(--t-slow)}.crail-card.on{background:var(--ink);border-color:var(--ink)}.crail-card.on .crail-tx b{color:var(--bg)}.crail-card.on .crail-chev,.crail-card.on .crail-tx em{color:color-mix(in srgb,var(--bg) 62%,transparent)}.crail-card.on .crail-ill{background:hsla(0,0%,100%,.12);color:var(--bg)}.crail-card.on .crail-bar{background:hsla(0,0%,100%,.16)}.crail-card.on .crail-bar i{background:var(--red)}.crail-card.on:hover{border-color:var(--red)}.crail-card.open:not(.on){border-color:color-mix(in srgb,var(--red) 55%,transparent)}.crail-card.open .crail-chev{color:var(--red)}.crail-nudge{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--br);background:var(--bg);color:var(--ink);cursor:pointer;opacity:0;transition:opacity var(--t-base),background var(--t-fast),border-color var(--t-fast);box-shadow:var(--shadow-2)}.crail-nudge-l{left:-6px}.crail-nudge-r{right:-6px}.crail-viewport.has-left .crail-nudge-l,.crail-viewport.has-right .crail-nudge-r{opacity:1}.crail-nudge:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}@media (hover:none){.crail-nudge{display:none}}.crail-subs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;padding:12px 14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--red) 32%,transparent);background:color-mix(in srgb,var(--red) 4%,transparent);animation:crail-open .22s ease-out both}@keyframes crail-open{0%{opacity:0;transform:translateY(-4px)}}.crail-subs-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-right:4px}.crail-sub{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--br);background:var(--bg);font-size:12.5px;font-weight:550;color:var(--ink);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}.crail-sub em{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--ink-3)}.crail-sub:hover{border-color:var(--red);color:var(--red)}.crail-sub:hover em{color:var(--red)}.crail-sub.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}.crail-sub.on em{color:color-mix(in srgb,var(--bg) 60%,transparent)}@media (max-width:640px){.crail{padding:14px 16px 18px}.crail-card{min-width:168px;padding:11px 12px 14px}.crail-ill{width:30px;height:30px}.crail-ill svg{width:19px;height:19px}.crail-tx b{font-size:12.5px}}