.knot-browser{margin-top:64px}.browser-hero{background:linear-gradient(135deg,#0B3D91,#0EA5E9);padding:48px 24px;text-align:center}.browser-hero h1{font-family:inter,sans-serif;font-size:36px;font-weight:800;color:#fff;margin:0 0 8px;text-align:center}.browser-subtitle{font-family:inter,sans-serif;font-size:16px;color:rgba(255,255,255,.85);max-width:600px;margin:0 auto;line-height:1.5}.browser-container{max-width:1200px;margin:0 auto;padding:0 24px}.taxonomy-intro{max-width:800px;margin:0 auto 32px;padding:0 24px;font-size:1.05rem;line-height:1.7;color:#334155}.taxonomy-intro p{margin-bottom:1em}.taxonomy-intro a{color:#0ea5e9;text-decoration:underline}.taxonomy-intro a:hover{color:#0b3d91}.filter-bar{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;margin:-32px auto 32px;position:relative;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,6%);display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end}.filter-group{display:flex;flex-direction:column;gap:8px}.filter-group label{font-family:inter,sans-serif;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.filter-buttons{display:flex;gap:6px;flex-wrap:wrap}.filter-btn{padding:7px 14px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;font-family:inter,sans-serif;font-size:13px;font-weight:500;color:#475569;cursor:pointer;transition:all .15s ease}.filter-btn:hover{border-color:#0ea5e9;color:#0ea5e9}.filter-btn.active{background:#0b3d91;color:#fff;border-color:#0b3d91}.knot-search{padding:8px 14px;border:1px solid #e2e8f0;border-radius:6px;font-family:inter,sans-serif;font-size:14px;min-width:220px;outline:none;transition:border-color .15s}.knot-search:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.1)}.knot-count{font-family:inter,sans-serif;font-size:14px;color:#64748b;margin-bottom:20px;font-weight:500}.category-section{margin-bottom:48px}.category-heading{font-family:inter,sans-serif;font-size:22px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:10px;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #e2e8f0}.category-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.category-dot.terminal{background:#2563eb}.category-dot.line-to-line{background:#059669}.category-dot.loop{background:#9333ea}.category-dot.specialty{background:#ea580c}.category-desc{font-size:15px;font-weight:400;color:#94a3b8}.knot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.knot-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;text-decoration:none;transition:all .2s ease;display:flex;flex-direction:column}.knot-card:hover{border-color:#94a3b8;box-shadow:0 4px 16px rgba(0,0,0,8%);transform:translateY(-2px)}.knot-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.strength-badge{font-family:inter,sans-serif;font-size:12px;font-weight:700;color:#0b3d91;background:#eff6ff;padding:3px 8px;border-radius:4px}.knot-card h3{font-family:inter,sans-serif;font-size:16px;font-weight:700;color:#0f172a;margin:0 0 8px;line-height:1.3}.knot-card p{font-family:inter,sans-serif;font-size:13px;color:#64748b;line-height:1.5;margin:0 0 auto}.knot-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid #f1f5f9}.line-types{display:flex;gap:4px;flex-wrap:wrap}.line-type-tag{font-family:inter,sans-serif;font-size:11px;font-weight:500;color:#64748b;background:#f1f5f9;padding:2px 7px;border-radius:3px}.card-arrow{color:#94a3b8;font-size:18px;transition:transform .2s}.knot-card:hover .card-arrow{transform:translateX(3px);color:#0ea5e9}.knot-detail{margin-top:64px}.knot-detail-hero{background:linear-gradient(135deg,#0B3D91,#0E4DA4);padding:36px 24px 28px}.knot-detail-hero-content{max-width:1200px;margin:0 auto}.breadcrumb{font-family:inter,sans-serif;font-size:13px;margin-bottom:16px}.breadcrumb a{color:rgba(255,255,255,.7);text-decoration:none}.breadcrumb a:hover{color:#fff}.breadcrumb span{color:rgba(255,255,255,.4);margin:0 6px}.breadcrumb .current{color:rgba(255,255,255,.9)}.knot-detail-hero h1{font-family:inter,sans-serif;font-size:34px;font-weight:800;color:#fff;margin:0 0 14px;text-align:left}.knot-badges{display:flex;gap:8px;flex-wrap:wrap}.badge{display:inline-block;padding:4px 12px;border-radius:100px;font-family:inter,sans-serif;font-size:12px;font-weight:600}.category-badge.terminal{background:rgba(37,99,235,.2);color:#93c5fd}.category-badge.line-to-line{background:rgba(5,150,105,.2);color:#6ee7b7}.category-badge.loop{background:rgba(147,51,234,.2);color:#c4b5fd}.category-badge.specialty{background:rgba(234,88,12,.2);color:#fdba74}.badge.difficulty-badge.beginner{background:rgba(22,163,74,.2);color:#86efac}.badge.difficulty-badge.intermediate{background:rgba(202,138,4,.2);color:#fde68a}.badge.difficulty-badge.advanced{background:rgba(220,38,38,.2);color:#fca5a5}.badge.strength-badge{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9)}.knot-detail-container{max-width:1200px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}.knot-content h2{font-family:inter,sans-serif;font-size:24px;font-weight:700;color:#0f172a;margin:40px 0 16px;padding-top:16px}.knot-content h2:first-child{margin-top:0;padding-top:0}.knot-content p{font-family:inter,sans-serif;font-size:16px;line-height:1.7;color:#334155;margin:0 0 16px}.knot-content ol{padding-left:24px;margin:0 0 20px}.knot-content ol li{font-family:inter,sans-serif;font-size:16px;line-height:1.7;color:#334155;margin-bottom:10px;padding-left:4px}.knot-content ul{padding-left:20px;margin:0 0 20px;list-style-type:disc}.knot-content ul li{font-family:inter,sans-serif;font-size:16px;line-height:1.7;color:#334155;margin-bottom:6px}.knot-content strong{color:#0f172a}.knot-sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:20px}.sidebar-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:20px}.sidebar-card h3{font-family:inter,sans-serif;font-size:14px;font-weight:700;color:#0f172a;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}.fact-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9}.fact-row:last-child{border-bottom:none}.fact-label{font-family:inter,sans-serif;font-size:13px;color:#64748b;font-weight:500}.fact-value{font-family:inter,sans-serif;font-size:13px;color:#0f172a;font-weight:600;text-transform:capitalize}.difficulty-text.beginner{color:#166534}.difficulty-text.intermediate{color:#92400e}.difficulty-text.advanced{color:#991b1b}.tag-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}.tag{font-family:inter,sans-serif;font-size:12px;font-weight:500;color:#475569;background:#e2e8f0;padding:4px 10px;border-radius:4px;margin:0}.line-tag{background:#dbeafe;color:#1e40af}.related-knots{max-width:1200px;margin:0 auto;padding:0 24px 60px}.related-knots h2{font-family:inter,sans-serif;font-size:24px;font-weight:700;color:#0f172a;margin:0 0 24px;padding-top:32px;border-top:1px solid #e2e8f0}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.related-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:20px;text-decoration:none;transition:all .2s ease;display:flex;flex-direction:column}.related-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px rgba(0,0,0,6%)}.related-card h3{font-family:inter,sans-serif;font-size:15px;font-weight:700;color:#0f172a;margin:10px 0 6px}.related-card p{font-family:inter,sans-serif;font-size:13px;color:#64748b;line-height:1.4;margin:0 0 auto}.related-arrow{color:#0ea5e9;font-size:16px;margin-top:12px;align-self:flex-end}.related-cta{text-align:center;margin-top:32px}@media(max-width:1024px){.knot-grid{grid-template-columns:repeat(2,1fr)}.related-grid{grid-template-columns:repeat(2,1fr)}.knot-detail-container{grid-template-columns:1fr 280px;gap:24px}}@media(max-width:768px){.browser-hero{padding:32px 16px}.browser-hero h1{font-size:28px}.filter-bar{flex-direction:column;margin:-20px 16px 24px;padding:16px}.filter-buttons{flex-wrap:wrap}.knot-search{min-width:auto;width:100%}.knot-grid{grid-template-columns:1fr}.knot-detail-container{grid-template-columns:1fr}.knot-sidebar{position:static}.knot-detail-hero h1{font-size:26px}.related-grid{grid-template-columns:1fr 1fr}.category-heading{flex-wrap:wrap;font-size:18px}.category-desc{display:none}}#game-area h1{text-align:center;margin-bottom:24px;font-size:2rem;color:#2d3a4a}#status{text-align:center;margin-bottom:16px;font-size:1.1rem;color:#4a5568}.hand{display:flex;justify-content:center;gap:12px;margin:16px 0;min-height:60px}.card{width:48px;height:68px;background:linear-gradient(135deg,#f8fafc 70%,#e2e8f0 100%);border:2px solid #cbd5e1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#2d3a4a;box-shadow:0 1px 4px rgba(0,0,0,4%);cursor:pointer;transition:border .2s,box-shadow .2s,transform .1s;user-select:none}.card.selected{border:2.5px solid #38bdf8;box-shadow:0 2px 8px rgba(56,189,248,.15);transform:translateY(-4px)scale(1.05)}.card:active{transform:scale(.97)}#scoreboard{display:flex;justify-content:space-between;margin-top:24px;font-size:1.1rem;background:#f1f5f9;border-radius:6px;padding:10px 18px;color:#334155}#start-game{display:block;margin:0 auto 18px;padding:10px 28px;font-size:1.1rem;background:#38bdf8;color:#fff;border:none;border-radius:6px;cursor:pointer;box-shadow:0 1px 4px rgba(56,189,248,8%);transition:background .2s}#start-game:hover{background:#0ea5e9}@media(max-width:600px){.cribbage-container{padding:12px 2vw}.card{width:36px;height:52px;font-size:1rem}}.knot-step-diagrams{margin:32px 0 40px;padding:0}.step-diagrams-title{display:flex;align-items:center;gap:10px;font-family:inter,sans-serif;font-size:20px;font-weight:700;color:#0b3d91;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #e2e8f0}.step-diagrams-title svg{color:#0ea5e9;flex-shrink:0}.step-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.step-card{position:relative;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.step-card:hover{box-shadow:0 8px 24px rgba(0,0,0,8%);transform:translateY(-2px)}.step-card-number{position:absolute;top:12px;left:12px;z-index:5}.step-card-number span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#0b3d91;color:#fff;border-radius:50%;font-family:inter,sans-serif;font-size:14px;font-weight:700;box-shadow:0 2px 8px rgba(11,61,145,.3)}.step-card-diagram{padding:8px;display:flex;align-items:center;justify-content:center;background:#fff}.step-card-diagram img{width:100%;height:auto;max-height:220px;object-fit:contain}@media(max-width:680px){.step-cards{grid-template-columns:1fr}}.knot-content ol,.knot-content ul{margin:20px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}.knot-content ol li,.knot-content ul li{position:relative;padding:14px 20px 14px 52px;background:#f8fafc;border-left:3px solid #0ea5e9;margin:0;font-family:inter,sans-serif;font-size:15px;line-height:1.65;color:#334155;transition:background .15s}.knot-content ol li:nth-child(even),.knot-content ul li:nth-child(even){background:#fff}.knot-content ol li:hover,.knot-content ul li:hover{background:#eff6ff}.knot-content ul li::before{content:'';position:absolute;left:20px;top:21px;width:8px;height:8px;background:#0ea5e9;border-radius:50%}.knot-content ol{counter-reset:knot-step}.knot-content ol li{counter-increment:knot-step}.knot-content ol li::before{content:counter(knot-step);position:absolute;left:14px;top:12px;width:26px;height:26px;background:#0b3d91;color:#fff;border-radius:50%;font-family:inter,sans-serif;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}.knot-content li p{margin:0;font-size:15px;line-height:1.65;color:#334155}.knot-content li strong{color:#0f172a;font-weight:700}.knot-content ol li:first-child,.knot-content ul li:first-child{border-radius:8px 8px 0 0}.knot-content ol li:last-child,.knot-content ul li:last-child{border-radius:0 0 8px 8px}