.rb-star-page { --star-ink:#18264d; --star-gold:#ffe44d; --star-paper:#fffdf5; --star-border:#c5cede; --star-muted:#536078; color:#253149; background:#f1f3f6; }
.rb-star-page main { padding-top:108px; }
.rb-star-container { width:min(1340px,calc(100% - 64px)); margin:auto; }
.rb-star-hero { padding:2rem 0 2.4rem; background:var(--star-paper); border-bottom:2px solid var(--star-ink); }
.rb-star-route { display:flex; flex-wrap:wrap; gap:.65rem 1.3rem; margin-bottom:2rem; color:var(--star-muted); font-size:.9rem; }
.rb-star-route a { color:var(--star-ink); text-decoration:underline; text-underline-offset:4px; }
.rb-star-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.rb-star-cover { position:relative; padding:1.8rem 2rem; background:var(--star-gold); border:2px solid var(--star-ink); box-shadow:7px 7px 0 var(--star-ink); }
.rb-star-cover-top { display:flex; align-items:center; gap:1.2rem; }
.rb-star-project-number { display:grid; width:78px; flex:0 0 78px; color:var(--star-ink); border:2px solid var(--star-ink); text-align:center; }
.rb-star-project-number small { background:var(--star-ink); color:#fff; font-size:.63rem; letter-spacing:.15em; padding:.3rem .2rem; }
.rb-star-project-number b { font-size:2.5rem; line-height:1.25; }
.rb-star-kicker { color:var(--star-ink); font-size:.88rem; font-weight:800; line-height:1.65; margin:0 0 .4rem; }
.rb-star-cover .rb-star-kicker { margin:0; letter-spacing:.08em; }
.rb-star-page h1 { margin:1.4rem 0 1.1rem; color:var(--star-ink); font-size:clamp(2.15rem,3.1vw,3.2rem); line-height:1.22; letter-spacing:-.025em; }
.rb-star-page h1 span { display:block; font-size:.58em; line-height:1.5; margin-top:.4rem; letter-spacing:0; }
.rb-star-intro { margin:0; font-size:1.06rem; line-height:1.95; font-weight:500; }
.rb-star-cover-goal { border-top:1px solid var(--star-ink); margin:1.1rem 0 0; padding-top:1rem; font-size:.94rem; line-height:1.8; }
.rb-star-cover-goal b { display:block; letter-spacing:.05em; }
.rb-star-hero-preview { min-width:0; }
.rb-star-hero-picture { margin:0; background:#fff; border:2px solid var(--star-ink); box-shadow:5px 5px 0 #d0d9e7; }
.rb-star-hero-picture img { display:block; width:100%; height:auto; }
.rb-star-hero-picture figcaption { padding:.85rem 1rem; color:var(--star-muted); font-size:.8rem; line-height:1.7; border-top:2px solid var(--star-ink); }
.rb-star-hero-picture figcaption b,.rb-star-hero-picture figcaption span { display:block; }
.rb-star-hero-picture figcaption b { color:var(--star-ink); font-size:.94rem; }
.rb-star-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.3rem 0 0; }
.rb-star-button,.rb-star-demo button { display:inline-flex; justify-content:center; align-items:center; gap:.3rem; color:var(--star-ink); background:#fff; border:2px solid var(--star-ink); padding:.7rem .9rem; border-radius:3px; font:inherit; font-size:.92rem; font-weight:800; line-height:1.5; text-decoration:none; cursor:pointer; }
.rb-star-button.is-primary { background:var(--star-ink); color:#fff; }
.rb-star-button:hover,.rb-star-demo button:hover { background:var(--star-gold); color:var(--star-ink); }
.rb-star-page main a:focus-visible,.rb-star-page main button:focus-visible,.rb-star-page main summary:focus-visible,.rb-star-page main select:focus-visible,.rb-star-page main input:focus-visible { outline:3px solid #006da3; outline-offset:4px; }
.rb-star-facts { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:1rem; margin:2rem 0 0; border-top:1px solid var(--star-border); padding-top:1.3rem; }
.rb-star-facts div { padding-left:1rem; border-left:4px solid var(--star-gold); }
.rb-star-facts dt { color:var(--star-muted); font-size:.78rem; margin-bottom:.3rem; }
.rb-star-facts dd { margin:0; color:var(--star-ink); font-size:.93rem; font-weight:700; line-height:1.7; }
.rb-star-layout { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:start; gap:2rem; padding-top:2.2rem; padding-bottom:4rem; }
.rb-star-nav { position:sticky; top:120px; padding:1.1rem; border:1px solid #aebad1; border-top:5px solid var(--star-ink); background:#fff; max-height:calc(100vh - 140px); overflow:auto; }
.rb-star-nav summary { color:var(--star-ink); font-size:1rem; font-weight:850; cursor:pointer; }
.rb-star-nav-links { padding-top:.7rem; }
.rb-star-nav a { display:block; color:#42516d; font-size:.85rem; line-height:1.7; padding:.48rem 0; text-decoration:none; border-bottom:1px solid #edf0f5; }
.rb-star-nav a:hover { color:#075982; text-decoration:underline; }
.rb-star-article { min-width:0; counter-reset:star-figure; }
.rb-star-section { padding:2rem; margin-bottom:2rem; border:1px solid var(--star-border); background:#fff; box-shadow:0 3px 0 #e4e9f1; scroll-margin-top:125px; }
.rb-star-step-heading { display:flex; align-items:center; gap:1.15rem; margin:0 0 1.4rem; padding-bottom:1.1rem; border-bottom:2px solid var(--star-ink); }
.rb-star-step-number { display:grid; flex:0 0 65px; text-align:center; color:var(--star-gold); background:var(--star-ink); border:2px solid var(--star-ink); box-shadow:4px 4px 0 #ffe44d; }
.rb-star-step-number small { color:var(--star-ink); background:#fff; font-size:.63rem; font-weight:800; letter-spacing:.14em; padding:.2rem; }
.rb-star-step-number b { font-size:2rem; line-height:1.3; }
.rb-star-section h2 { margin:.5rem 0 1.2rem; color:var(--star-ink); font-size:clamp(1.45rem,2.1vw,2rem); line-height:1.45; }
.rb-star-step-heading h2 { margin:0; }
.rb-star-section h3 { color:var(--star-ink); font-size:1.17rem; line-height:1.65; }
.rb-star-subhead { margin:1.9rem 0 .6rem; padding-left:.8rem; border-left:5px solid var(--star-gold); }
.rb-star-section p,.rb-star-list,.rb-star-steps { font-size:1.05rem; line-height:1.95; }
.rb-star-body-copy { margin:.9rem 0; max-width:44em; font-weight:400; overflow-wrap:anywhere; }
.rb-star-body-copy strong { color:var(--star-ink); font-weight:800; background:linear-gradient(transparent 63%,#fff0a0 63%); }
.rb-star-section .rb-star-goal { padding:.8rem 1rem; margin:0 0 1.4rem; background:#fff9d7; color:#38405b; font-size:.93rem; border-left:4px solid var(--star-gold); }
.rb-star-goal b { display:block; color:var(--star-ink); font-size:.76rem; letter-spacing:.08em; }
.rb-star-list { padding-left:1.4rem; }
.rb-star-list li { margin:.5rem 0; }
.rb-star-steps { counter-reset:operation; padding:1rem 1.1rem; margin:1.2rem 0 1.5rem; list-style:none; border:1px solid #c7d7e5; background:#f2f8fb; }
.rb-star-steps li { counter-increment:operation; display:grid; grid-template-columns:1.65rem 1fr; gap:.65rem; align-items:start; margin:.65rem 0; font-size:.99rem; }
.rb-star-steps li::before { content:counter(operation); display:grid; place-items:center; height:1.65rem; margin-top:.2rem; font-size:.85rem; font-weight:800; line-height:1; border:1px solid var(--star-ink); background:var(--star-gold); color:var(--star-ink); }
.rb-star-figure { counter-increment:star-figure; margin:1.6rem 0; border:1px solid #bac6d8; background:#fff; overflow:hidden; }
.rb-star-image-link { display:block; width:min(100%,var(--picture-width)); margin:auto; }
.rb-star-image-stage { display:block; position:relative; }
.rb-star-figure img { display:block; width:100%; height:auto; object-fit:contain; }
.rb-star-figure figcaption { padding:.85rem 1rem; border-top:1px solid #d3dce8; background:#f5f7fa; color:#40516c; font-size:.86rem; line-height:1.85; overflow-wrap:anywhere; }
.rb-star-figure figcaption::before { content:'图 ' counter(star-figure) ' · '; font-weight:800; color:var(--star-ink); }
.rb-star-figure.is-mindmap .rb-star-image-link,.rb-star-figure.is-code-picture .rb-star-image-link { overflow-x:auto; }
.rb-star-figure.is-mindmap img { min-width:780px; max-width:none; }
.rb-star-figure.is-code-picture img { min-width:900px; max-width:none; }
.rb-star-pin { position:absolute; transform:translate(-50%,-50%); width:29px; height:29px; display:grid; place-items:center; color:var(--star-ink); background:var(--star-gold); border:2px solid #fff; box-shadow:0 0 0 2px var(--star-ink); border-radius:50%; font-weight:900; font-size:.88rem; }
.rb-star-image-key { display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; padding:1rem; margin:0; list-style:none; color:var(--star-ink); border-top:1px solid #d3dce8; }
.rb-star-image-key li { display:flex; align-items:center; gap:.5rem; font-size:.85rem; line-height:1.65; }
.rb-star-image-key b { display:grid; place-items:center; flex:0 0 24px; height:24px; background:var(--star-gold); border:1px solid var(--star-ink); border-radius:50%; }
.rb-star-speech { display:flex; align-items:center; gap:1rem; margin:1.7rem 0; padding:1.1rem 1.2rem; background:#fff8ce; border:2px solid var(--star-ink); box-shadow:4px 4px 0 #e8e1b9; }
.rb-star-speech svg { flex:0 0 58px; width:58px; height:78px; }
.rb-star-speech div { min-width:0; }
.rb-star-speech strong { color:var(--star-ink); font-size:1.02rem; line-height:1.7; }
.rb-star-section .rb-star-speech p { margin:.35rem 0 0; color:#48506a; font-size:.95rem; line-height:1.8; }
.rb-star-table-wrap { overflow-x:auto; margin:1.5rem 0; border:1px solid #b4c2d7; }
.rb-star-table-wrap table { width:100%; min-width:650px; border-collapse:collapse; font-size:.92rem; line-height:1.75; }
.rb-star-table-wrap th,.rb-star-table-wrap td { padding:.8rem; text-align:left; vertical-align:top; border-bottom:1px solid #d4dce9; overflow-wrap:anywhere; }
.rb-star-table-wrap th { color:#fff; background:var(--star-ink); }
.rb-star-table-wrap td { color:#344158; }
.rb-star-table-wrap tbody tr:nth-child(even) { background:#f6f8fb; }
.rb-star-details { padding:1rem; margin:1.4rem 0; border:1px solid #aebed4; background:#f7f9fc; }
.rb-star-details summary { cursor:pointer; color:var(--star-ink); font-weight:800; line-height:1.7; }
.rb-star-code { margin:1.25rem 0; overflow:hidden; border:2px solid var(--star-ink); background:#101b30; }
.rb-star-code-bar { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.9rem 1rem; background:#e8eef6; color:var(--star-ink); font-size:.9rem; }
.rb-star-code-bar strong { min-width:0; }
.rb-star-code-bar button { color:var(--star-ink); background:#fff; border:1px solid var(--star-ink); padding:.4rem .7rem; font:inherit; font-weight:700; white-space:nowrap; cursor:pointer; }
.rb-star-code-bar button:hover { background:var(--star-gold); }
.rb-star-page pre { max-width:100%; overflow-x:auto; margin:0; padding:1.2rem; line-height:1.8; font-size:.91rem; tab-size:4; color:#d1edff; background:#101b30; }
.rb-star-details pre { margin-top:1rem; }
.rb-star-page code { font-family:Consolas,'Microsoft YaHei',monospace; }
.rb-star-demo { margin:1.5rem 0; border:2px solid var(--star-ink); overflow:hidden; background:#f3f8fc; }
.rb-star-demo-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:1rem; background:var(--star-gold); color:var(--star-ink); }
.rb-star-demo-heading span { font-size:.8rem; }
.rb-star-demo canvas { display:block; width:100%; height:auto; background:#0c1c30; }
.rb-star-demo-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.85rem; padding:1rem; }
.rb-star-demo-controls label { display:grid; gap:.45rem; color:var(--star-ink); font-size:.88rem; font-weight:600; }
.rb-star-demo select { color:var(--star-ink); background:#fff; border:1px solid #687b9d; padding:.5rem; font:inherit; }
.rb-star-demo input { width:175px; accent-color:#176c97; }
.rb-star-demo output { font-variant-numeric:tabular-nums; color:#07577e; }
.rb-star-section .rb-star-demo-readout { padding:0 1rem 1rem; margin:0; font-size:.9rem; line-height:1.8; }
.rb-star-demo-readout code,.rb-star-demo-readout span { display:block; overflow-wrap:anywhere; }
.rb-star-demo-readout code { color:#064b70; font-weight:700; }
.rb-star-checkpoint { margin-top:1.8rem; padding:1.1rem 1.2rem; background:#edf8f1; border:1px solid #aacabb; border-left:5px solid #2b7950; }
.rb-star-checkpoint>b { color:#245f43; font-size:.96rem; }
.rb-star-section .rb-star-checkpoint p { color:#365649; margin:.45rem 0; font-size:.95rem; line-height:1.8; }
.rb-star-checkpoint a { display:inline-block; margin-top:.4rem; color:#18466b; font-size:.93rem; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.rb-star-finish-stamp { display:inline-block; margin-top:.8rem; padding:.5rem 1.1rem; border:2px solid var(--star-ink); background:var(--star-gold); color:var(--star-ink); font-weight:900; letter-spacing:.1em; box-shadow:4px 4px 0 var(--star-ink); }
.rb-star-sources { padding-left:1.4rem; line-height:2; }
.rb-star-sources a { color:#135782; text-decoration:underline; text-underline-offset:3px; }
.rb-star-tags { display:flex; flex-wrap:wrap; gap:.55rem; }
.rb-star-tags span { padding:.4rem .7rem; color:#21506f; border:1px solid #a9c5d7; background:#edf6fc; font-size:.9rem; }
.rb-star-review { border-top:5px solid #c69f1c; }
.rb-star-page .site-footer { background:#08090c; color:#f7f4ec; }
@media(max-width:1100px) { .rb-star-layout { grid-template-columns:195px minmax(0,1fr); gap:1.2rem; } .rb-star-section { padding:1.5rem; } .rb-star-cover { padding:1.5rem; } .rb-star-hero-grid { gap:1.5rem; } }
@media(max-width:850px) { .rb-star-page main { padding-top:86px; } .rb-star-hero-grid,.rb-star-layout { grid-template-columns:minmax(0,1fr); } .rb-star-nav { position:static; max-height:none; } .rb-star-nav-links { display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1rem; } .rb-star-hero-preview { margin-top:.5rem; } }
@media(max-width:550px) { .rb-star-container { width:calc(100% - 28px); } .rb-star-hero { padding:1.4rem 0 1.8rem; } .rb-star-route { gap:.5rem .9rem; margin-bottom:1.5rem; font-size:.78rem; } .rb-star-cover { padding:1.25rem; box-shadow:4px 4px 0 var(--star-ink); } .rb-star-project-number { width:64px; flex-basis:64px; } .rb-star-project-number b { font-size:2rem; } .rb-star-page h1 { font-size:2.1rem; } .rb-star-intro { font-size:1rem; } .rb-star-hero-grid { gap:1.5rem; } .rb-star-facts { grid-template-columns:1fr; gap:.85rem; } .rb-star-facts div { display:grid; grid-template-columns:4.2em 1fr; gap:.4rem; } .rb-star-facts dt { margin-top:.25rem; } .rb-star-nav-links { grid-template-columns:1fr; } .rb-star-layout { padding-top:1.3rem; } .rb-star-section { padding:1.25rem 1rem; margin-bottom:1.4rem; } .rb-star-step-heading { gap:.8rem; align-items:flex-start; } .rb-star-step-number { flex-basis:45px; } .rb-star-step-number b { font-size:1.5rem; } .rb-star-step-heading h2 { font-size:1.35rem; } .rb-star-step-heading .rb-star-kicker { font-size:.75rem; } .rb-star-section p,.rb-star-list,.rb-star-steps { font-size:1rem; } .rb-star-code-bar { flex-wrap:wrap; } .rb-star-actions .rb-star-button { flex:1 1 100%; } .rb-star-figure figcaption { padding:.8rem; } .rb-star-image-key { grid-template-columns:1fr; padding:.8rem; } .rb-star-speech { padding:.9rem; gap:.7rem; } .rb-star-speech svg { width:42px; height:61px; flex-basis:42px; } .rb-star-speech strong { font-size:.94rem; } .rb-star-pin { width:24px; height:24px; font-size:.78rem; } .rb-star-demo-controls { gap:.7rem; } }