.howto-page { background:#f5f6f7; color:#172832; }
.howto-hero { background:radial-gradient(ellipse at 15% 10%,#e8a33d17,transparent 55%),#0c0e10; color:#fff; padding:64px 0 50px; }
.howto-eyebrow { color:#e8a33d; font-size:.73rem; text-transform:uppercase; letter-spacing:.13em; font-weight:750; }
.howto-hero h1 { max-width:1000px; font-size:clamp(2rem,4vw,3.65rem); line-height:1.12; letter-spacing:-.04em; margin:14px 0 20px; color:#fff; }
.howto-hero p:not(.howto-eyebrow) { max-width:760px; color:#b8c3cb; line-height:1.7; }
.howto-hero-links { display:flex; gap:24px; flex-wrap:wrap; margin-top:25px; }
.howto-hero-links a { color:#efb65b; font-size:.9rem; }
.howto-main { padding-top:30px; padding-bottom:70px; }
.howto-fiction { display:flex; align-items:baseline; gap:10px; color:#61727d; font-size:.85rem; line-height:1.6; margin:0 0 30px; }
.howto-fiction>span { border:1px solid #c99035; color:#956217; border-radius:50%; width:20px; line-height:18px; text-align:center; flex-shrink:0; }
.howto-cast { background:#fff; border:1px solid #e0e6e9; border-radius:20px; padding:28px; display:flex; align-items:center; gap:28px; margin-bottom:30px; }
.howto-cast>div { display:flex; align-items:center; gap:16px; flex:1; min-width:0; }
.howto-cast h2 { font-size:1.1rem; margin:6px 0; }.howto-cast p,.howto-cast small { font-size:.78rem; color:#697a86; margin:0; }
.howto-club-mark { width:72px; height:80px; clip-path:polygon(0 0,100% 0,92% 78%,50% 100%,8% 78%); display:grid; place-items:center; flex-shrink:0; background:linear-gradient(135deg,#efc36d,#b4781b); color:#171b1d; font-weight:900; letter-spacing:.04em; }
.howto-club-mark--guest { background:linear-gradient(135deg,#6fa5a6,#214e55); color:#fff; }.howto-versus { color:#9aa5ad; font-size:.8rem; }
.howto-lessons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.howto-lesson { display:flex; gap:22px; padding:28px; border:1px solid #dde3e7; border-radius:17px; color:#172832; background:#fff; text-decoration:none; transition:background .18s,border-color .18s,transform .18s; }
.howto-lesson:hover { color:#172832; text-decoration:none; background:#fff8e9; border-color:#dfa137; transform:translateY(-2px); }
.howto-step-number { color:#b87a1c; font-weight:750; font-size:1.3rem; font-variant-numeric:tabular-nums; }.howto-lesson h2 { margin:0 0 10px; font-size:1.15rem; line-height:1.4; }.howto-lesson p { color:#687b87; font-size:.88rem; line-height:1.65; margin:0 0 15px; }.howto-lesson div>span { font-size:.78rem; color:#98620c; }
.howto-demo-link { display:flex; flex-direction:column; gap:10px; margin-top:28px; border:1px solid #b77f2d; border-radius:18px; padding:30px; color:#fff; background:linear-gradient(120deg,#30281b,#101315 70%); text-decoration:none; }.howto-demo-link:hover { color:#fff; }.howto-demo-link>span { color:#edb85c; font-size:.8rem; }.howto-demo-link strong { font-size:1.4rem; }.howto-demo-link small { color:#b7c2cb; }
.howto-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:38px; align-items:start; }.howto-article { min-width:0; }.howto-toc { position:sticky; top:100px; display:flex; flex-direction:column; gap:5px; }.howto-toc a { display:flex; gap:12px; font-size:.8rem; line-height:1.5; padding:10px; border-radius:9px; color:#5c7180; text-decoration:none; }.howto-toc a[aria-current],.howto-toc a:hover { background:#eee5d4; color:#6b460c; }.howto-toc a>span { color:#a57530; font-variant-numeric:tabular-nums; }
.howto-step-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:start; }.howto-step-grid--wide { grid-template-columns:minmax(0,1fr); }
.howto-copy { font-size:.94rem; line-height:1.85; overflow-wrap:anywhere; }.howto-copy h2 { font-size:1.3rem; margin:0 0 15px; }.howto-copy h2:not(:first-child) { margin-top:28px; }.howto-copy p,.howto-copy ol,.howto-copy ul { margin:0 0 18px; }.howto-copy li { margin-bottom:12px; padding-left:4px; }.howto-copy ol,.howto-copy ul { padding-left:22px; }.howto-copy a { color:#84601e; }.howto-copy table { width:100%; border-collapse:collapse; }.howto-copy td,.howto-copy th { padding:8px; border:1px solid #dde3e7; }
.howto-scene { margin:0; min-width:0; }.howto-scene>figcaption { color:#7b8b96; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }.howto-scene-panel { background:#fff; border:1px solid #dde6eb; border-radius:18px; padding:24px; box-shadow:0 14px 40px #152c3710; overflow-wrap:anywhere; }.howto-scene-panel h2 { font-size:1.2rem; margin:8px 0 20px; }.howto-scene-panel p { font-size:.82rem; line-height:1.7; color:#6a7f8c; margin:10px 0; }.howto-sample-label { text-transform:uppercase; color:#176d65; font-size:.65rem; letter-spacing:.07em; font-weight:750; }.howto-scene-panel button { border:1px solid #b3cecc; border-radius:8px; padding:10px 14px; background:#edf6f3; color:#176d65; font:inherit; font-size:.78rem; margin-top:10px; opacity:1; }.howto-scene-panel label { display:block; font-size:.8rem; }.howto-scene-panel input { display:block; width:100%; box-sizing:border-box; font:inherit; padding:12px; border:1px solid #d6e0e7; border-radius:8px; margin-top:8px; background:#fff; color:#263b48; }.howto-sample-tabs { display:flex; gap:20px; margin-bottom:22px; padding-bottom:12px; border-bottom:1px solid #e4ebee; font-size:.8rem; color:#72848f; }.howto-sample-tabs strong { color:#176d65; }.howto-sample-note { margin-top:18px; padding:16px; background:#edf5f2; border-radius:10px; font-size:.8rem; }.howto-sample-note p { margin-bottom:0; }.howto-sample-row { padding:15px 0; border-bottom:1px solid #e5ebee; font-size:.85rem; }.howto-sample-row small { display:block; color:#7a8b96; margin-top:6px; }.howto-sample-status { display:inline-block; font-size:.7rem; color:#21614f; background:#e3f0e8; padding:6px 10px; border-radius:20px; margin-top:12px; }.howto-scene-panel .howto-sample-meta { font-size:.72rem; }.howto-sample-actions { display:flex; flex-wrap:wrap; gap:8px; }.howto-scene-panel blockquote { border-left:2px solid #d6ad5e; padding:12px; margin:15px 0; background:#f7f8f8; font-size:.8rem; }
.howto-map-sample { position:relative; height:210px; border-radius:10px; margin-top:16px; overflow:hidden; background:linear-gradient(35deg,transparent 40%,#fff 41% 48%,transparent 49%),repeating-linear-gradient(90deg,#e6eee5 0 60px,#d4dfdb 61px 64px); }
.howto-map-marker { box-sizing:border-box; display:inline-grid; place-items:center; flex-shrink:0; width:32px; height:32px; padding:0; line-height:1; border:2px solid #fff; border-radius:50%; color:#142733; font-size:.85rem; font-weight:750; box-shadow:0 3px 8px #0003; }
.howto-map-marker--hall { background:#e8a33d; }.howto-map-marker--entrance { background:#2dd4bf; }.howto-map-marker--parking { background:#60a5fa; }
.howto-map-sample>.howto-map-marker { position:absolute; z-index:2; transform:translate(-50%,-50%); }
.howto-map-hall { left:70%; top:32%; }.howto-map-entrance { left:61%; top:62%; }.howto-map-parking { left:26%; top:71%; }
.howto-map-building { position:absolute; left:50%; top:13%; width:40%; height:43%; box-sizing:border-box; border:2px solid #8f9da5; border-radius:4px; background:repeating-linear-gradient(90deg,#c7d0d5 0 15px,#b4c0c8 16px 18px); box-shadow:5px 7px 0 #73858d33; display:flex; align-items:flex-end; justify-content:center; padding-bottom:7px; }
.howto-map-building>span { color:#3d515d; font-size:.6rem; font-weight:700; background:#dce3e6df; padding:2px 5px; border-radius:3px; }.howto-map-building::after { content:''; position:absolute; bottom:-5px; left:20%; width:18%; height:6px; border:1px solid #5d707a; background:#81939c; }
.howto-map-parking-area { position:absolute; left:10%; top:52%; width:33%; height:40%; display:flex; justify-content:space-around; align-items:flex-end; box-sizing:border-box; padding:7px 3px; border:2px solid #a0adb3; border-radius:4px; background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),#f5f5ee calc(25% - 2px) 25%) 0 100%/100% 45% no-repeat,#b4bec3; box-shadow:3px 4px 0 #73858d22; }
.howto-map-parking-area>i { display:block; width:13%; height:25%; border:1px solid #496471; border-radius:3px; background:#678e9e; box-shadow:0 2px 2px #0002; }.howto-map-parking-area>i:nth-child(2) { background:#a76057; border-color:#814943; }.howto-map-parking-area>i:nth-child(4) { background:#e0c589; border-color:#aa8d54; }
.howto-map-legend { list-style:none; display:flex; flex-wrap:wrap; gap:10px 16px; margin:14px 0 20px; padding:0; color:#627986; font-size:.75rem; }.howto-map-legend>li { display:flex; align-items:center; gap:7px; }
.howto-logo-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.howto-logo-samples>div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:9px; min-height:130px; border:1px solid #dbe3e7; }.howto-logo-samples>div:last-child { background:#101619; }.howto-logo-samples .howto-club-mark { width:48px; height:55px; font-size:.7rem; }.howto-logo-samples small { color:#84949f; font-size:.65rem; }.howto-checker { background:repeating-conic-gradient(#e5e8eb 0 25%,#fff 0 50%) 0/16px 16px; }.howto-mini-match { background:linear-gradient(125deg,#342a18,#0d1113); color:#fff; padding:18px; border-radius:12px; margin-top:22px; }.howto-mini-match>small { color:#efb250; font-size:.65rem; }.howto-mini-match>strong { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:18px; font-size:.75rem; }.howto-mini-match>strong>span { flex-shrink:0; color:#efc26a; }
.howto-pager { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; margin-top:38px; padding-top:24px; border-top:1px solid #dce4e8; }.howto-pager a { color:#866027; font-size:.85rem; max-width:46%; overflow-wrap:anywhere; }
.howto-mini-match { position:relative; isolation:isolate; overflow:hidden; }
.howto-mini-match>:not(.howto-mini-match__watermark) { position:relative; z-index:1; }
.howto-mini-match__watermark { position:absolute; z-index:0; left:12px; top:50%; opacity:.26; transform:translateY(-50%) rotate(-14deg) skewY(-3deg); pointer-events:none; filter:drop-shadow(8px 10px 3px #0008); }
.howto-mini-match__watermark .howto-club-mark { width:115px; height:130px; font-size:1.5rem; }
.howto-board { margin-top:25px; border:1px solid #364047; border-radius:20px; padding:26px; background:radial-gradient(ellipse at top left,#dba44513,transparent 60%),#101417; color:#f4f3ef; overflow-wrap:anywhere; }.howto-board button:not([data-demo-native]),.howto-board select { font:inherit; border-radius:9px; border:1px solid #55616a; background:#1c252b; color:#fff; padding:10px 14px; cursor:pointer; font-size:.85rem; }.howto-board button:not([data-demo-native]):hover:not(:disabled) { border-color:#e8a33d; background:#313024; }.howto-board button:disabled { opacity:.4; cursor:not-allowed; }.howto-board button:focus-visible,.howto-board select:focus-visible { outline:3px solid #e8a33d; outline-offset:3px; }.howto-board-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }.howto-board h2 { font-size:1.2rem; margin:0; line-height:1.5; color:#fff; }.howto-board-disclaimer { font-size:.75rem; color:#9aaab5; line-height:1.7; margin:18px 0; }.howto-board-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }.howto-board [aria-pressed=true] { border-color:#e8a33d; background:#40321e; color:#f9ca78; }.howto-board [data-demo-message] { color:#e8bd71; font-size:.85rem; margin:12px 0; }.howto-board [data-demo-message]:empty { display:none; }.howto-board-card { padding:22px; border:1px solid #344047; border-radius:14px; background:#171e22; margin-top:16px; }.howto-board-card h3 { font-size:1.05rem; margin:0 0 14px; color:#f4f3ef; }.howto-board-card p { font-size:.82rem; line-height:1.7; color:#a6b5bf; }.howto-board-card label { display:grid; grid-template-columns:85px minmax(0,1fr); align-items:center; gap:12px; margin:12px 0; font-size:.85rem; }.howto-board select { width:100%; min-width:0; padding:10px; }.howto-board-state { display:flex; justify-content:space-between; gap:16px; color:#adb9c2; font-size:.8rem; }.howto-board-score { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin:20px 0; }.howto-board-team { border:1px solid #4073a0; border-radius:12px; padding:18px; text-align:center; min-width:0; }.howto-board-team:last-child { border-color:#2c8c7d; }.howto-board-team h3 { font-size:.9rem; margin:0; }.howto-board-team strong { display:block; font-size:3.4rem; line-height:1.2; margin:12px 0; font-variant-numeric:tabular-nums; color:#9cc9ff; }.howto-board-team:last-child strong { color:#5ed9c0; }.howto-board-team>span { font-size:.75rem; color:#adbdc8; }.howto-board-hit-controls,.howto-board-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; justify-content:center; }.howto-board-hit-controls button { min-width:50px; font-size:1.15rem; }.howto-board .howto-board-primary { background:#e8ac49; color:#171d21; border-color:#e8ac49; font-weight:750; }.howto-board-table { margin-top:22px; width:100%; table-layout:fixed; border-collapse:collapse; font-size:.75rem; }.howto-board-table th,.howto-board-table td { padding:10px 6px; border-bottom:1px solid #293239; overflow-wrap:anywhere; }.howto-board-table th:first-child { width:24px; }.howto-board-table th:nth-child(3) { width:58px; text-align:center; }.howto-board-table td:nth-child(3) { text-align:center; font-variant-numeric:tabular-nums; }.howto-board-table tr[aria-current] { background:#dfb45b16; }.howto-board-table th { color:#a6b5c0; font-weight:600; text-align:left; }.howto-board-rosters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; font-size:.8rem; }.howto-board-rosters p { margin:4px 0; }.howto-board a { color:#e8b65f; }.howto-board details { margin-top:16px; color:#aab9c3; font-size:.8rem; }.howto-board summary { cursor:pointer; }
@media(max-width:1100px) { .howto-step-grid { grid-template-columns:minmax(0,1fr); }.howto-scene { max-width:580px; }.howto-layout { grid-template-columns:190px minmax(0,1fr); gap:25px; } }
@media(max-width:760px) { .howto-hero { padding:36px 0; }.howto-lessons,.howto-layout { grid-template-columns:minmax(0,1fr); }.howto-cast { flex-direction:column; align-items:flex-start; padding:20px; gap:18px; }.howto-cast>div { width:100%; }.howto-versus { margin-left:88px; }.howto-lesson { padding:22px; gap:16px; }.howto-toc { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }.howto-toc a { font-size:.72rem; gap:8px; padding:8px; }.howto-board { padding:16px; }.howto-board-head { flex-wrap:wrap; }.howto-board-team { padding:12px 8px; }.howto-board-team strong { font-size:2.6rem; }.howto-board-card { padding:16px; }.howto-board-card label { grid-template-columns:minmax(0,1fr); gap:6px; }.howto-board-rosters { grid-template-columns:minmax(0,1fr); }.howto-pager a { max-width:100%; } }
.howto-board [hidden] { display:none!important; }
.howto-board [data-demo-stage] { margin-top:20px; }
.howto-board .md-card { margin-top:16px; }
.howto-board .md-col-num { width:5%; }.howto-board .md-col-name { width:27%; }.howto-board .md-col-hits { width:7%; }.howto-board .md-col-cum { width:10%; }.howto-board .md-col-ziel { width:7%; }
.howto-board .md-lineups { gap:20px; }.howto-board .md-lineup { min-width:0; }.howto-board .md-lineup-team { overflow-wrap:anywhere; }
.howto-board caption { caption-side:bottom; padding:12px 0; color:#8fa2af; font-size:.7rem; text-align:left; }
.howto-board-roster .md-athlete label { display:grid; grid-template-columns:90px minmax(0,1fr); align-items:center; gap:12px; font-size:.85rem; }
.howto-board-roster .md-athlete>.md-sub { display:block; margin-top:8px; font-size:.7rem; }
.howto-board-card-log { margin-top:22px; font-size:.82rem; }.howto-board-card-log p { margin:12px 0; }.howto-board-card-log small { color:#94a3b8; }
.howto-board-dialog { width:min(620px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:16px; background:transparent; color:#f4f3ef; }
.howto-board-dialog::backdrop { background:#080c14bf; backdrop-filter:blur(3px); }
.howto-board-dialog .md-modal { box-sizing:border-box; max-width:none; max-height:calc(100dvh - 24px); }
.howto-board-dialog .md-violation-group { margin:12px 0; }
.howto-board-dialog .md-cards-footer--back { border:0; background:transparent; padding:10px 0; }
.howto-board-catalog-search { display:block; color:#b5c5d2; font-size:.8rem; margin:16px 0; }
.howto-board-catalog-search input { display:block; width:100%; box-sizing:border-box; margin-top:8px; border:1px solid #53616b; border-radius:8px; padding:12px; background:#0d151c; color:#fff; font:inherit; }
.howto-board .md-fencer-card .md-card-ico { vertical-align:middle; }
@media(max-width:500px) { .howto-board-roster .md-athlete label { grid-template-columns:minmax(0,1fr); gap:8px; }.howto-board .md-live-score { font-size:2.6rem; }.howto-board .md-live-vs strong { font-size:1.4rem; }.howto-board .md-lineups { grid-template-columns:minmax(0,1fr); } }
.howto-quickstart { margin:0 0 36px; padding:32px; border:1px solid #dec99f; border-radius:20px; background:linear-gradient(135deg,#fffaf0,#fff 60%); }
.howto-quickstart>header { margin-bottom:28px; }.howto-quickstart>header h2 { font-size:clamp(1.45rem,2.5vw,2rem); letter-spacing:-.03em; margin:8px 0 12px; }.howto-quickstart>header>p:last-child { color:#677c89; font-size:.9rem; line-height:1.7; margin:0; }
.howto-timeline { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px 48px; align-items:start; }
.howto-timeline>h3 { margin:0; color:#936217; font-size:.8rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }.howto-timeline>h3:nth-of-type(1) { grid-column:1; grid-row:1; }.howto-timeline>h3:nth-of-type(2) { grid-column:2; grid-row:1; color:#176d65; }
.howto-timeline>ol { counter-reset:howto-flow; list-style:none; margin:0; padding:0; }.howto-timeline>ol:nth-of-type(1) { grid-column:1; grid-row:2; }.howto-timeline>ol:nth-of-type(2) { grid-column:2; grid-row:2; }
.howto-timeline>ol>li { counter-increment:howto-flow; position:relative; margin:0; padding:0 0 24px 48px; min-height:48px; overflow-wrap:anywhere; }.howto-timeline>ol>li:last-child { padding-bottom:0; }
.howto-timeline>ol>li::before { content:counter(howto-flow); position:absolute; left:0; top:0; display:grid; place-items:center; box-sizing:border-box; width:30px; height:30px; border:1px solid #d6ad60; border-radius:50%; background:#fff3d8; color:#8b5a0b; font-size:.8rem; font-weight:750; z-index:1; }
.howto-timeline>ol>li:not(:last-child)::after { content:''; position:absolute; left:14px; top:31px; bottom:0; border-left:1px solid #e2cfaa; }
.howto-timeline>ol:nth-of-type(2)>li::before { border-color:#8fbbb1; background:#e7f3ee; color:#176d65; }.howto-timeline>ol:nth-of-type(2)>li:not(:last-child)::after { border-color:#bdd8d0; }
.howto-timeline>ol>li>strong { display:block; padding-top:3px; color:#172832; font-size:.9rem; line-height:1.5; }.howto-timeline>ol>li>p { margin:7px 0 0; color:#657b88; font-size:.82rem; line-height:1.75; }
.howto-timeline .howto-demo-link { margin-top:16px; padding:20px; gap:8px; border-radius:12px; }.howto-timeline .howto-demo-link strong { font-size:1rem; line-height:1.5; }.howto-timeline .howto-demo-link small { font-size:.75rem; line-height:1.6; }.howto-timeline .howto-demo-link:focus-visible { outline:2px solid #b98122; outline-offset:4px; }
.howto-timeline-links { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:.8rem; line-height:1.6; }.howto-timeline-links a { color:#85550c; text-decoration:underline; text-underline-offset:3px; }.howto-timeline-links a:hover { color:#4e350a; }.howto-timeline-links a:focus-visible { outline:2px solid #b98122; outline-offset:4px; border-radius:2px; }.howto-timeline>ol:nth-of-type(2) .howto-timeline-links a,.howto-timeline>p .howto-timeline-links a { color:#176d65; }
.howto-timeline>p { grid-column:1 / -1; margin:10px 0 0; padding:16px 18px; border-radius:10px; background:#edf4f3; color:#4c6b73; font-size:.82rem; line-height:1.7; }
@media(max-width:760px) { .howto-quickstart { padding:22px 18px; }.howto-timeline { display:block; }.howto-timeline>h3 { margin:0 0 18px; }.howto-timeline>h3:not(:first-child) { margin-top:30px; }.howto-timeline>p { margin-top:26px; }.howto-timeline>ol>li { padding-left:44px; } }
@media(prefers-reduced-motion:reduce) { .howto-lesson { transition:none; } }