@charset "UTF-8";
.creen-guide{--ink:#302d25;--accent:#975720;--line:#ded6c5;--paper:#faf8f1}
.creen-hero{gap:36px;align-items:center}.creen-hero .hero-copy h1{font-size:clamp(34px,3.3vw,49px);line-height:1.17;max-width:21ch;text-wrap:balance}.creen-hero .button-link{display:inline-flex;background:var(--ink);color:var(--paper);padding:13px 18px;font-size:14px;text-decoration:none;font-weight:600}
.shot-board{background:#292b27;color:#f5eedd;padding:24px;border-radius:2px;box-shadow:8px 8px 0 #d7cbb5;min-width:0}.board-heading{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;border-bottom:1px solid #626158;padding-bottom:16px;margin-bottom:18px}.shot-frames{display:grid;gap:14px}.shot-frame{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center}.shot-art{height:82px;background:#d1b996;position:relative;overflow:hidden;isolation:isolate}.shot-art:after{content:"";position:absolute;bottom:0;left:0;right:0;height:31%;background:#a58d6f;z-index:-1}.mug{display:block;position:absolute;left:34px;top:23px;width:34px;height:37px;border:2px solid #f8f0df;background:#e9ddc6;border-radius:3px 3px 12px 12px;box-shadow:5px 8px 5px #51412a33}.mug:after{content:"";position:absolute;right:-14px;top:5px;width:12px;height:21px;border:4px solid #e9ddc6;border-left:0;border-radius:0 12px 12px 0}.shot-0 .shot-art{background:transparent;border:1px solid #777467}.shot-0 .shot-art:after{background:transparent;border-top:1px dashed #99917e}.shot-0 .mug{background:transparent;border-color:#c1b396;box-shadow:none}.shot-0 .mug:after{border-color:#c1b396}.shot-2 .mug{transform:scale(1.16)}.shot-2 .shot-line{position:absolute;inset:8px;border:1px solid #fff9e770}.shot-label{min-width:0}.shot-label>span{font-size:10px;color:#ccad78;letter-spacing:.1em}.shot-label h3{font-size:17px;color:#fff8e7;line-height:1.35;margin:4px 0}.shot-label p{font-size:12px;color:#d0c8b7;line-height:1.5;margin:0}.board-caption{font-size:10px;color:#c5bcaa;border-top:1px solid #626158;padding-top:14px;margin-top:20px;line-height:1.5}
.creen-guide .tool-profile{border:1px solid #d9c8aa;border-inline-start:4px solid #9b722f;background:#f1ebdd;padding:22px 25px;margin:30px 0}.creen-guide .tool-profile h2{border:0;padding:0;margin:10px 0 12px;font-size:25px;line-height:1.4}.creen-guide .tool-profile h2 a{color:var(--ink);text-decoration-thickness:1px}.creen-guide .tool-profile p{font-size:15px;margin:0;color:var(--muted)}.creen-guide .reading-layout{margin-bottom:70px}.creen-guide .prose a{overflow-wrap:anywhere}.creen-guide .hero-copy{min-width:0}
@media(max-width:800px){.shot-board{width:100%;max-width:540px;margin-inline:auto}.creen-hero{gap:28px}}
@media(max-width:520px){.shot-board{padding:18px;box-shadow:4px 4px 0 #d7cbb5}.shot-frame{grid-template-columns:86px 1fr;gap:14px}.shot-art{height:76px}.mug{left:23px;top:20px}.shot-label h3{font-size:15px}.creen-hero .hero-copy h1{font-size:34px;letter-spacing:-.5px;max-width:none}.creen-guide .tool-profile{padding:19px}.creen-guide .tool-profile h2{font-size:22px}.creen-guide .prose pre,.creen-guide .prose pre code{white-space:pre-wrap;overflow-wrap:anywhere}}
@media print{.shot-board{box-shadow:none;max-width:420px;print-color-adjust:exact}.creen-guide .tool-profile{break-inside:avoid}.creen-guide .reading-layout{margin-bottom:0}}

html[lang="zh-CN"] .creen-hero .hero-copy h1{max-width:none;text-wrap:wrap}