.guide-page{display:flex;flex-direction:column;min-height:100vh;background-color:var(--bg-main);color:var(--text-primary)}.guide-wrapper{display:flex;width:100%;max-width:1360px;margin:0 auto;padding:1.5rem 1.5rem 4rem;gap:2.5rem;position:relative}.guide-header-nav{display:flex;align-items:center;gap:.85rem}.guide-nav-link{font-size:.88rem;font-weight:600;color:var(--text-secondary);text-decoration:none;padding:.45rem .85rem;border-radius:var(--radius-sm);transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:.4rem}.guide-nav-link:hover{color:var(--brand-accent);background-color:var(--bg-hover)}.guide-nav-link.active{color:var(--brand-accent);background-color:#0284c714}.btn-launch-scorer{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .95rem;font-size:.85rem;font-weight:600;color:#fff;background-color:var(--brand-emerald);border-radius:var(--radius-sm);text-decoration:none;box-shadow:0 2px 4px #10b98133;transition:all var(--transition-fast)}.btn-launch-scorer:hover{background-color:#059669;transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.mobile-toc-toggle{display:none;align-items:center;gap:.45rem;padding:.45rem .85rem;font-size:.85rem;font-weight:600;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer}.guide-sidebar{width:280px;flex-shrink:0;position:sticky;top:calc(64px + 1.5rem);max-height:calc(100vh - 64px - 3rem);overflow-y:auto;padding-right:.75rem;scrollbar-width:thin;scrollbar-color:var(--border-subtle) transparent}.guide-sidebar::-webkit-scrollbar{width:4px}.guide-sidebar::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:4px}.sidebar-search-box{position:relative;margin-bottom:1.25rem}.sidebar-search-input{width:100%;padding:.55rem .85rem .55rem 2.2rem;font-size:.84rem;font-family:var(--font-sans);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast)}.sidebar-search-input:focus{outline:none;border-color:var(--brand-accent);box-shadow:0 0 0 3px #0284c71f}.sidebar-search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.toc-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-muted);margin-bottom:.75rem;padding-left:.5rem}.toc-nav{display:flex;flex-direction:column;gap:.2rem}.toc-item{display:flex;flex-direction:column}.toc-link{font-size:.86rem;font-weight:500;color:var(--text-secondary);text-decoration:none;padding:.45rem .65rem;border-radius:var(--radius-sm);transition:all var(--transition-fast);line-height:1.35;border-left:2px solid transparent}.toc-link:hover{color:var(--text-primary);background-color:var(--bg-hover)}.toc-link.active{color:var(--brand-accent);background-color:#0284c714;font-weight:600;border-left-color:var(--brand-accent)}.toc-sub-list{display:flex;flex-direction:column;gap:.15rem;padding-left:.85rem;margin-top:.15rem;margin-bottom:.25rem;border-left:1px solid var(--border-subtle);margin-left:.5rem}.toc-sub-link{font-size:.8rem;font-weight:400;color:var(--text-secondary);text-decoration:none;padding:.3rem .5rem;border-radius:var(--radius-sm);transition:all var(--transition-fast);line-height:1.3}.toc-sub-link:hover{color:var(--text-primary);background-color:var(--bg-hover)}.toc-sub-link.active{color:var(--brand-accent);font-weight:600}.guide-content{flex:1;min-width:0;max-width:900px}.guide-hero{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--border-subtle)}.guide-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;font-size:.8rem;font-weight:700;color:var(--brand-emerald);background-color:#ecfdf5;border:1px solid #A7F3D0;border-radius:var(--radius-full);margin-bottom:1rem}.guide-title{font-size:2.4rem;font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:.85rem}.guide-lead{font-size:1.15rem;line-height:1.6;color:var(--text-secondary);max-width:780px}.guide-quick-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}.quick-pill{font-size:.82rem;font-weight:600;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-subtle);padding:.35rem .75rem;border-radius:var(--radius-full);text-decoration:none;transition:all var(--transition-fast)}.quick-pill:hover{color:var(--brand-accent);border-color:var(--brand-accent);background:#0284c70a}.guide-section{margin-bottom:3.5rem;scroll-margin-top:5rem}.section-divider{height:1px;background:var(--border-subtle);margin:3.5rem 0}.guide-h2{font-size:1.75rem;font-weight:800;letter-spacing:-.025em;color:var(--text-primary);margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;position:relative}.guide-h3{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;color:var(--text-primary);margin-top:1.75rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem;position:relative}.guide-h4{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-top:1.25rem;margin-bottom:.5rem}.guide-p{font-size:.98rem;line-height:1.7;color:var(--text-secondary);margin-bottom:1.15rem}.guide-list{margin-bottom:1.25rem;padding-left:1.4rem;color:var(--text-secondary);font-size:.98rem;line-height:1.7}.guide-list li{margin-bottom:.4rem}.guide-list strong{color:var(--text-primary)}.anchor-link{opacity:0;color:var(--text-muted);text-decoration:none;font-weight:400;font-size:1.1rem;transition:opacity var(--transition-fast),color var(--transition-fast);margin-left:.25rem}.guide-h2:hover .anchor-link,.guide-h3:hover .anchor-link{opacity:.7}.anchor-link:hover{opacity:1!important;color:var(--brand-accent)}.callout{border-radius:var(--radius-md);padding:1.1rem 1.25rem;margin:1.5rem 0;display:flex;gap:.9rem;border-left:4px solid transparent;background-color:var(--bg-surface);box-shadow:var(--shadow-sm)}.callout-icon{flex-shrink:0;width:22px;height:22px;margin-top:.15rem}.callout-content{flex:1;font-size:.92rem;line-height:1.6}.callout-title{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}.callout-tip{background-color:#f0fdf4;border-left-color:#10b981;color:#166534}.callout-tip .callout-title{color:#15803d}.callout-tip .callout-content{color:#14532d}.callout-important{background-color:#f0f9ff;border-left-color:#0284c7;color:#075985}.callout-important .callout-title{color:#0369a1}.callout-important .callout-content{color:#0c4a6e}.callout-note{background-color:#f8fafc;border-left-color:#64748b;border:1px solid var(--border-subtle);border-left:4px solid #64748B}.callout-note .callout-title{color:#475569}.callout-note .callout-content{color:#334155}.workflow-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.5rem;margin:1.75rem 0;box-shadow:var(--shadow-sm)}.workflow-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle)}.workflow-title{font-size:.92rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.workflow-badge{font-size:.75rem;font-weight:600;padding:.2rem .55rem;border-radius:var(--radius-full);background:#eef2ff;color:#4f46e5}.workflow-steps-horizontal{display:flex;align-items:stretch;gap:.75rem;overflow-x:auto;padding-bottom:.5rem}.workflow-step{flex:1;min-width:170px;background:var(--bg-main);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;position:relative}.workflow-step-num{font-size:.72rem;font-weight:800;text-transform:uppercase;color:var(--brand-accent);margin-bottom:.35rem;letter-spacing:.05em}.workflow-step-name{font-size:.88rem;font-weight:700;color:var(--text-primary);margin-bottom:.35rem}.workflow-step-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.4}.workflow-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-weight:700}.console-mockup-container{background:#0f172a;border-radius:var(--radius-lg);padding:1.25rem;margin:1.75rem 0;color:#f8fafc;box-shadow:0 10px 25px -5px #0f172a4d;border:1px solid #1E293B;font-family:var(--font-mono)}.console-mockup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #334155}.console-tablet-dots{display:flex;gap:.4rem}.console-dot{width:10px;height:10px;border-radius:50%;background:#334155}.console-dot.red{background:#ef4444}.console-dot.yellow{background:#f59e0b}.console-dot.green{background:#10b981}.console-mockup-title{font-size:.82rem;color:#94a3b8;font-weight:500}.console-grid-preview{display:grid;grid-template-columns:2fr 1fr;gap:1rem}.console-active-bar{grid-column:1 / -1;background:#1e293b;border:1px solid #334155;border-radius:var(--radius-md);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;font-size:.88rem}.console-timer-pill{color:#10b981;font-weight:700;background:#10b98126;padding:.25rem .6rem;border-radius:var(--radius-sm);display:flex;align-items:center;gap:.4rem}.console-field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.console-btn{background:#1e293b;border:1px solid #334155;border-radius:var(--radius-sm);padding:.75rem .5rem;text-align:center;font-size:.78rem;font-weight:600;color:#e2e8f0}.console-btn.scoring{background:#064e3b;border-color:#059669;color:#a7f3d0}.console-btn.bonus{background:#78350f;border-color:#d97706;color:#fde68a}.console-btn.miss{background:#450a0a;border-color:#dc2626;color:#fecaca}.console-queue-panel{background:#1e293b;border:1px solid #334155;border-radius:var(--radius-md);padding:.75rem;display:flex;flex-direction:column;gap:.5rem;font-size:.78rem}.console-queue-title{color:#94a3b8;font-size:.72rem;text-transform:uppercase;font-weight:700;border-bottom:1px solid #334155;padding-bottom:.35rem}.console-queue-item{padding:.3rem .5rem;border-radius:var(--radius-sm);background:#0f172a;display:flex;justify-content:space-between}.console-queue-item.active{border-left:3px solid #10B981;color:#10b981}.console-bottom-bar{grid-column:1 / -1;margin-top:.5rem;display:flex;justify-content:space-between;gap:.5rem}.console-action-btn{padding:.5rem .85rem;border-radius:var(--radius-sm);background:#334155;color:#fff;font-size:.75rem;font-weight:700;text-align:center}.console-action-btn.finish{background:#10b981;color:#0f172a}.rules-matrix-container{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.5rem;margin:1.75rem 0;box-shadow:var(--shadow-sm)}.rules-toolbar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle)}.rules-category-tabs{display:flex;flex-wrap:wrap;gap:.35rem}.rules-tab{padding:.35rem .75rem;font-size:.82rem;font-weight:600;color:var(--text-secondary);background:var(--bg-main);border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.rules-tab:hover{background:var(--bg-hover);color:var(--text-primary)}.rules-tab.active{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}.rules-search-box{position:relative;min-width:220px}.rules-search-input{width:100%;padding:.45rem .75rem .45rem 2rem;font-size:.84rem;font-family:var(--font-sans);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-main)}.rules-search-input:focus{outline:none;border-color:var(--brand-accent)}.rules-table-wrapper{overflow-x:auto}.rules-table{width:100%;border-collapse:collapse;font-size:.9rem;text-align:left}.rules-table th{background:var(--bg-main);color:var(--text-primary);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:.75rem 1rem;border-bottom:1px solid var(--border-subtle)}.rules-table td{padding:1rem;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:top;line-height:1.5}.rules-table tr:hover td{background-color:#f1f5f980}.rules-game-name{font-weight:700;color:var(--text-primary);font-size:.95rem}.rules-time-badge{display:inline-block;padding:.2rem .5rem;font-size:.75rem;font-weight:700;font-family:var(--font-mono);background:#f1f5f9;color:#334155;border-radius:var(--radius-sm);white-space:nowrap}.rules-highlight-tag{display:inline-block;margin-top:.35rem;margin-right:.3rem;padding:.15rem .45rem;font-size:.72rem;font-weight:600;border-radius:var(--radius-full);background:#eef2ff;color:#4f46e5}.code-block-container{background:#0f172a;color:#f8fafc;border-radius:var(--radius-md);margin:1.25rem 0;overflow:hidden;border:1px solid #1E293B;font-family:var(--font-mono)}.code-block-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#1e293b;border-bottom:1px solid #334155;font-size:.75rem;color:#94a3b8}.code-copy-btn{background:transparent;border:none;color:#94a3b8;cursor:pointer;font-size:.75rem;display:flex;align-items:center;gap:.3rem;transition:color var(--transition-fast)}.code-copy-btn:hover{color:#f8fafc}.code-block-content{padding:1rem;overflow-x:auto;font-size:.85rem;line-height:1.5;white-space:pre}.back-to-top{position:fixed;bottom:2rem;right:2rem;width:42px;height:42px;border-radius:50%;background:var(--brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);cursor:pointer;border:none;opacity:0;visibility:hidden;transition:all var(--transition-fast);z-index:40}.back-to-top.visible{opacity:1;visibility:visible}.back-to-top:hover{transform:translateY(-3px);background:var(--brand-accent)}@media (max-width: 1024px){.guide-sidebar{display:none;position:fixed;top:64px;left:0;width:280px;height:calc(100vh - 64px);max-height:calc(100vh - 64px);background:var(--bg-surface);z-index:49;padding:1.5rem;box-shadow:var(--shadow-lg);border-right:1px solid var(--border-subtle)}.guide-sidebar.open{display:block}.mobile-toc-toggle{display:inline-flex}.console-grid-preview{grid-template-columns:1fr}}@media (max-width: 640px){.guide-title{font-size:1.85rem}.guide-lead{font-size:1rem}.workflow-steps-horizontal{flex-direction:column}.workflow-arrow{transform:rotate(90deg);padding:.25rem 0}}