:root { --ink:#101c39; --muted:#71809b; --line:#dce3ee; --paper:#f5f7fb; --blue:#3977ef; --red:#f25c53; --orange:#ee9e25; --cyan:#258edb; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC","Microsoft YaHei",sans-serif; } a { color:inherit; }.public-shell { max-width:1180px; min-height:100vh; margin:auto; background:#fff; }.public-header { height:72px; padding:0 7%; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:500 12px "DM Mono",monospace; letter-spacing:1px; }.brand-mark { display:grid; place-items:center; width:27px; height:27px; background:var(--ink); color:#fff; font:14px "DM Mono",monospace; }.header-note { color:var(--muted); font-size:12px; }.public-hero { padding:64px 9% 50px; background:#f3f6ff; }.kicker { margin:0 0 10px; color:#71809b; font:11px "DM Mono",monospace; letter-spacing:1.2px; }.public-hero h1 { margin:0; font-size:clamp(38px,5vw,63px); line-height:1.18; }.public-hero h1 em { color:var(--blue); font-style:normal; }.public-hero p:last-child { max-width:500px; margin:20px 0 0; color:var(--muted); line-height:1.8; font-size:14px; }.channel-section { padding:58px 9% 72px; }.section-top { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; }.section-top h2 { margin:0; font-size:28px; }.section-top > span { color:var(--muted); font-size:12px; }.channel-tabs { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }.channel-tab { display:grid; grid-template-columns:28px 1fr 18px; gap:10px; align-items:center; min-height:76px; padding:0 18px; border:0; border-right:1px solid var(--line); background:#fff; color:#77849c; text-align:left; cursor:pointer; font:inherit; }.channel-tab:last-child { border-right:0; }.channel-tab.active { background:#eef4ff; color:var(--ink); }.channel-tab > span { font:10px "DM Mono",monospace; }.channel-tab b { font-size:15px; }.channel-tab i { font-style:normal; color:#9babc2; }.channel-tab.active i { color:var(--blue); }.channel-tab.blue b { color:var(--blue); }.channel-tab.red b { color:var(--red); }.channel-tab.orange b { color:var(--orange); }.channel-tab.cyan b { color:var(--cyan); }.channel-panel { margin-top:14px; border:1px solid var(--line); }.panel-heading { display:flex; justify-content:space-between; align-items:start; padding:30px 34px 24px; border-bottom:1px solid var(--line); }.channel-badge { display:inline-block; padding:5px 9px; font-size:12px; font-weight:700; }.channel-badge.blue { color:#2868dc; background:#e7efff; }.channel-badge.red { color:#d74c45; background:#fff0ee; }.channel-badge.orange { color:#a9700e; background:#fff4d8; }.channel-badge.cyan { color:#217bbd; background:#e8f5ff; }.panel-heading h2 { margin:11px 0 5px; font-size:26px; }.panel-heading p { margin:0; color:var(--muted); font-size:13px; }.panel-meta { color:#8795ab; font-size:12px; }.public-workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.8fr); gap:30px; padding:27px 34px 34px; }.steps-area .kicker,.actions-area .kicker { margin-bottom:12px; }.steps-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.step-card { min-height:136px; display:flex; flex-direction:column; justify-content:space-between; padding:12px; background-color:#eff4ff; background-image:var(--step-image); background-size:cover; background-position:center; border:1px solid #d9e2f1; position:relative; overflow:hidden; }.step-number { z-index:1; display:grid; place-items:center; width:23px; height:23px; color:#fff; background:var(--blue); font:10px "DM Mono",monospace; }.step-title { z-index:1; align-self:flex-start; padding:4px 6px; color:var(--ink); background:rgba(255,255,255,.9); font-size:12px; font-weight:600; }.actions-area { padding:21px; border:1px solid var(--line); background:#f9fbff; }.actions-area h3 { margin:0 0 17px; font-size:18px; }.public-action { display:grid; grid-template-columns:29px 1fr auto; gap:10px; align-items:center; padding:14px 0; border-top:1px solid #e3e8f2; text-decoration:none; }.public-action:first-of-type { border-top:0; }.action-icon { display:grid; place-items:center; width:27px; height:27px; color:var(--blue); background:#e3edff; font:16px "DM Mono",monospace; }.public-action b { display:block; font-size:13px; }.public-action small { display:block; margin-top:4px; color:#8290a5; font-size:11px; line-height:1.4; }.public-action i { color:var(--blue); font-size:18px; font-style:normal; }.public-action em { padding:5px 7px; color:#8c6a19; background:#fff1c9; font-size:11px; font-style:normal; white-space:nowrap; }.public-action:not(.disabled):hover { background:#f0f5ff; }.public-action.disabled { cursor:not-allowed; }.public-footer { display:flex; justify-content:space-between; padding:20px 9%; color:#8995a8; border-top:1px solid var(--line); font:10px "DM Mono",monospace; }
@media (max-width:800px) { .public-workspace { grid-template-columns:1fr; }.channel-tabs { grid-template-columns:1fr 1fr; }.channel-tab:nth-child(odd) { border-bottom:1px solid var(--line); }.channel-tab:nth-child(2) { border-right:0; }.channel-tab:nth-child(4) { border-right:0; } }
@media (max-width:520px) { .public-header { padding:0 20px; }.header-note { display:none; }.public-hero { padding:46px 24px 38px; }.channel-section { padding:42px 20px 58px; }.section-top { align-items:start; flex-direction:column; gap:7px; }.channel-tab { min-height:62px; padding:0 12px; grid-template-columns:22px 1fr; }.channel-tab i { display:none; }.panel-heading { padding:24px 20px 20px; }.public-workspace { padding:21px 20px 24px; }.steps-grid { gap:8px; }.step-card { min-height:112px; }.actions-area { padding:16px; } }
.step-item { min-width:0; }.step-card { width:100%; color:inherit; text-align:left; cursor:zoom-in; font:inherit; }.step-card i { z-index:1; align-self:flex-end; color:#3977ef; background:rgba(255,255,255,.9); padding:3px 5px; font-size:10px; font-style:normal; }.step-description { min-height:38px; margin:7px 0 0; color:var(--ink); font-size:13px; font-weight:600; line-height:1.5; }.image-viewer { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:56px 90px; background:rgba(15,27,55,.9); }.image-viewer[hidden] { display:none; }.image-viewer figure { display:grid; max-width:100%; max-height:100%; margin:0; place-items:center; overflow:auto; }.image-viewer img { display:block; max-width:100%; max-height:calc(100vh - 120px); object-fit:contain; transform-origin:center; transition:transform .16s ease; }.image-viewer figcaption { margin-top:14px; color:#fff; font:12px "DM Mono",monospace; }.viewer-close,.viewer-nav,.viewer-tools button { display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.52); background:rgba(15,27,55,.78); cursor:pointer; }.viewer-close { position:absolute; top:18px; right:20px; width:40px; height:40px; font-size:27px; }.viewer-nav { position:absolute; top:50%; width:42px; height:42px; font-size:23px; transform:translateY(-50%); }.viewer-prev { left:24px; }.viewer-next { right:24px; }.viewer-nav:disabled { opacity:.35; cursor:default; }.viewer-tools { position:absolute; bottom:20px; display:flex; border:1px solid rgba(255,255,255,.52); }.viewer-tools button { width:46px; height:36px; border:0; border-right:1px solid rgba(255,255,255,.52); font:14px "DM Mono",monospace; }.viewer-tools button:last-child { border-right:0; }.viewer-close:hover,.viewer-nav:not(:disabled):hover,.viewer-tools button:hover { background:#3977ef; }.viewer-open { overflow:hidden; }
@media (max-width:520px) { .image-viewer { padding:56px 51px; }.viewer-prev { left:8px; }.viewer-next { right:8px; }.viewer-close { top:10px; right:10px; } }
.step-card { aspect-ratio:var(--image-ratio, 4 / 3); min-height:0; }