.skap *{box-sizing:border-box;margin:0;padding:0}.skap{--red:#D5282D;--red-d:#b21f24;--ink:#232323;--bg:#ffffff;--soft:#f6f6f7;--soft-2:#eeeef0;--line:#e3e3e6;--muted:#6b7280;--good:#15a34a;--radius:18px;--shadow:0 18px 40px -18px rgba(20,20,25,.28);--fHead:'Dosis',system-ui,sans-serif;--fBody:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-family:var(--fBody);color:var(--ink);background:var(--bg);border-radius:var(--radius);padding:clamp(18px,4vw,36px);max-width:1100px;margin:0 auto;line-height:1.5;-webkit-font-smoothing:antialiased}.skap h1,.skap h2,.skap h3,.skap .seg button,.skap .pill-btn,.skap .cta,.skap .qbtn{font-family:var(--fHead)}.skap h1,.skap h2,.skap h3{line-height:1.08;font-weight:800;letter-spacing:-.01em}.skap .kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--fHead);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px}.skap .kicker::before{content:"";width:24px;height:3px;background:var(--red);border-radius:3px}.skap .head h1{font-size:clamp(26px,5.2vw,46px)}.skap .head p{color:var(--muted);max-width:62ch;margin-top:8px;font-size:clamp(15px,2.4vw,17px)}.skap .quiz{margin:22px 0 8px;background:linear-gradient(180deg,#fff,var(--soft));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.skap .quiz-bar{height:5px;background:var(--soft-2)}.skap .quiz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),#ff5a5f);transition:width .4s cubic-bezier(.4,0,.2,1)}.skap .quiz-in{padding:clamp(20px,4vw,34px)}.skap .quiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.skap .quiz-step{font-family:var(--fHead);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.skap .skip{background:none;border:0;color:var(--muted);font-family:var(--fBody);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.skap .skip:hover{color:var(--ink)}.skap .qstage{position:relative}.skap .qslide{animation:skap-fade .35s ease}@keyframes skap-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.skap .qq{font-family:var(--fHead);font-weight:800;font-size:clamp(20px,3.4vw,28px);margin-bottom:4px}.skap .qsub{color:var(--muted);font-size:14px;margin-bottom:18px}.skap .qopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.skap .qbtn{cursor:pointer;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 16px 15px;transition:.18s;display:flex;flex-direction:column;gap:6px;font-family:var(--fBody);color:var(--ink)}.skap .qbtn:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(213,40,45,.5)}.skap .qbtn .ic{font-size:22px;line-height:1}.skap .qbtn b{font-family:var(--fHead);font-size:16px;font-weight:700}.skap .qbtn span{font-size:12.5px;color:var(--muted);line-height:1.35}.skap .qback{margin-top:16px;background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}.skap .qback:hover{color:var(--ink)}.skap .result{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}.skap .result .rimg{width:200px;max-width:36vw;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}.skap .result .rimg img{display:block;width:100%;height:auto}.skap .result .rmeta .pre{font-family:var(--fHead);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--red)}.skap .result .rmeta h3{font-size:clamp(28px,5vw,40px);margin:2px 0 4px}.skap .result .rmeta .tag{color:var(--muted);margin-bottom:12px}.skap .reasons{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.skap .reasons li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}.skap .reasons li svg{flex:none;margin-top:2px}.skap .ractions{display:flex;flex-wrap:wrap;gap:10px}.skap .controls{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin:26px 0 16px}.skap .ctl-group{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.skap .label{font-family:var(--fHead);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.skap .seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px;position:relative}.skap .seg button{appearance:none;background:none;border:0;color:var(--ink);cursor:pointer;font-weight:700;font-size:14px;padding:8px 18px;border-radius:999px;transition:color .25s;position:relative;z-index:1}.skap .seg button.active{color:#fff}.skap .seg .pill{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:999px;background:linear-gradient(180deg,#e8403f,var(--red));box-shadow:0 4px 12px rgba(213,40,45,.45);transition:transform .32s cubic-bezier(.34,1.56,.64,1),width .32s cubic-bezier(.34,1.56,.64,1);z-index:0}.skap .pills{display:flex;flex-wrap:wrap;gap:8px}.skap .pill-btn{appearance:none;cursor:pointer;font-weight:700;font-size:13px;color:var(--ink);background:#fff;border:1.5px solid var(--line);padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:.18s}.skap .pill-btn .dot{width:9px;height:9px;border-radius:50%;background:#cfcfd4;transition:.2s}.skap .pill-btn.on{border-color:var(--red);background:rgba(213,40,45,.07)}.skap .pill-btn.on .dot{background:var(--red);box-shadow:0 0 0 4px rgba(213,40,45,.16)}.skap .pill-btn:hover{border-color:var(--red)}.skap .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px;font-weight:600}.skap .switch input{display:none}.skap .track{width:42px;height:24px;border-radius:999px;background:#d3d3d8;position:relative;transition:.25s;flex:none}.skap .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.25s}.skap .switch input:checked+.track{background:var(--red)}.skap .switch input:checked+.track::after{transform:translateX(18px)}.skap .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);scrollbar-width:thin;box-shadow:var(--shadow)}.skap .grid{--cols:3;display:grid;grid-template-columns:minmax(132px,1fr) repeat(var(--cols),minmax(150px,1.05fr));min-width:560px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.skap .corner{background:var(--soft);position:sticky;left:0;z-index:6;border-right:1px solid var(--line)}.skap .mcard{padding:16px 12px 14px;text-align:center;border-left:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--soft));position:relative;scroll-snap-align:start}.skap .mcard.rec{background:linear-gradient(180deg,#fff,rgba(213,40,45,.06));box-shadow:inset 0 -3px 0 var(--red)}.skap .mcard .art{height:84px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.skap .mcard .art img{max-height:84px;width:auto;max-width:100%;object-fit:contain;border-radius:8px}.skap .mcard .art a{display:inline-flex;line-height:0}.skap .mcard .art a img,.skap .result .rimg a img{transition:transform .25s ease}.skap .mcard .art a:hover img,.skap .result .rimg a:hover img{transform:scale(1.05)}.skap .mcard h3{font-size:clamp(17px,2.6vw,21px)}.skap .mcard .tag{font-size:11px;color:var(--muted);margin-top:2px;min-height:14px}.skap .badge-pop{position:absolute;top:9px;left:9px;font-family:var(--fHead);font-size:9px;font-weight:800;letter-spacing:.06em;background:var(--ink);color:#fff;padding:3px 7px;border-radius:999px;text-transform:uppercase}.skap .badge-rec{position:absolute;top:9px;right:9px;font-family:var(--fHead);font-size:9px;font-weight:800;letter-spacing:.04em;background:var(--red);color:#fff;padding:3px 7px;border-radius:999px;text-transform:uppercase;display:none}.skap .mcard.rec .badge-rec{display:inline-block}.skap .section{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding:13px 16px 7px;font-family:var(--fHead);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:var(--soft);border-top:1px solid var(--line)}.skap .section span{height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}.skap .cell,.skap .rlabel{padding:13px 12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;transition:opacity .3s;min-height:56px}.skap .rlabel{justify-content:flex-start;text-align:left;font-weight:700;font-family:var(--fHead);position:sticky;left:0;background:#fff;z-index:2;border-right:1px solid var(--line);font-size:14px}.skap .rlabel small{display:block;color:var(--muted);font-weight:400;font-family:var(--fBody);font-size:11px}.skap .cell{border-left:1px solid var(--line)}.skap .cell.rec{background:rgba(213,40,45,.035)}.skap .mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;font-weight:900}.skap .yes{background:rgba(21,163,74,.12);color:var(--good)}.skap .no{background:var(--soft-2);color:#a1a1aa}.skap .barwrap{width:100%;max-width:160px}.skap .barval{font-family:var(--fHead);font-weight:800;font-size:17px;margin-bottom:6px;display:flex;align-items:baseline;justify-content:center;gap:4px}.skap .barval small{font-size:11px;color:var(--muted);font-weight:600}.skap .bartrack{height:8px;border-radius:999px;background:var(--soft-2);overflow:hidden}.skap .barfill{height:100%;border-radius:999px;width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}.skap .barfill.h{background:linear-gradient(90deg,var(--red),#ff6b6b)}.skap .barfill.w{background:linear-gradient(90deg,#3f3f46,#71717a)}.skap .best{font-family:var(--fHead);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--red);margin-top:6px;display:inline-flex;align-items:center;gap:4px;opacity:0;transform:translateY(4px);transition:.4s}.skap .best.show{opacity:1;transform:none}.skap .grid.diffmode .row-same.cell,.skap .grid.diffmode .row-same.rlabel{opacity:.22}.skap .foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:20px;color:var(--muted);font-size:13px}.skap .cta{appearance:none;cursor:pointer;font-weight:800;font-size:16px;color:#fff;border:0;border-radius:999px;padding:14px 30px;background:var(--red);box-shadow:0 10px 24px -8px rgba(213,40,45,.6);transition:transform .15s,box-shadow .2s,background .2s,color .2s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.skap .cta:hover{transform:translateY(-2px);background:#000;color:#fff;box-shadow:0 14px 30px -8px rgba(0,0,0,.45)}.skap .cta.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}.skap .cta.ghost:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}.skap .hint{display:flex;align-items:center;gap:7px}.skap .swipe-hint{display:none;align-items:center;gap:6px;color:var(--muted);font-size:11.5px;margin-top:10px;justify-content:center}@keyframes skap-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}.skap .swipe-hint svg{animation:skap-nudge 1.4s ease-in-out infinite}@media (max-width:600px){.skap .grid{grid-template-columns:minmax(96px,.9fr) repeat(var(--cols),minmax(140px,1fr))}.skap .scroller{scroll-snap-type:x proximity}.skap .swipe-hint{display:flex}.skap .result{grid-template-columns:1fr;text-align:center;justify-items:center}.skap .ractions{justify-content:center}.skap .controls{gap:14px}}