:root{--ink:#222c2c;--muted:#697572;--green:#26664d;--mint:#e6eee5;--line:#e1e5df;--paper:#f6f5f1;--orange:#df8a47;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #df8a47;outline-offset:4px}button:disabled{opacity:.4;cursor:default}button{transition:background .15s,transform .15s}a{color:inherit}.site-header{max-width:1440px;margin:auto;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 64px;border-bottom:1px solid var(--line)}.brand{position:relative;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-.9px;display:flex;align-items:center;gap:9px;padding-bottom:12px}.brand-sub{font-size:7px;letter-spacing:1.8px;position:absolute;bottom:0;left:39px;font-weight:600}.brand-symbol{display:flex;gap:3px;transform:skew(-15deg)}.brand-symbol i{width:7px;height:24px;background:#d7ad3a}.brand-symbol i:nth-child(2){background:#417968;transform:translateY(-4px)}.brand-symbol i:nth-child(3){background:#5077a2}.header-label{font-size:13px;color:var(--muted)}.text-button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:10px}.text-button:hover{color:var(--green)}main{max-width:1440px;margin:auto;padding:48px 64px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px;gap:24px}.eyebrow,.small-label{font-size:10px;font-weight:700;letter-spacing:1.7px}.eyebrow{color:var(--green)}.eyebrow span{margin:0 9px;color:#9ca69c}h1{font-size:clamp(27px,3vw,39px);font-weight:600;letter-spacing:-1.5px;margin:13px 0 12px}.title-dot{color:var(--green)}.intro p{margin:0;font-size:14px;color:var(--muted)}.guide-type{display:flex;gap:13px;align-items:center;font-size:12px;font-weight:600}.guide-type small{display:block;font-size:11px;color:var(--muted);margin-top:6px;font-weight:400}.wifi-mark{border:1px solid #cdd7cb;color:var(--green);background:#e9eee5;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:25px}.workspace{display:grid;grid-template-columns:210px minmax(0,1fr);gap:36px}.chapters{padding-top:17px}.small-label{font-size:8px;letter-spacing:1.1px;color:#7e8982;margin-bottom:22px}.chapter{display:flex;align-items:center;gap:12px;text-align:left;border:0;background:transparent;padding:13px 0;width:100%;color:#7a827e;font-size:12px;position:relative}.chapter:not(:last-child):after{content:"";position:absolute;left:13px;top:43px;height:14px;border-left:1px solid #d4dcd2}.chapter .number{border:1px solid #d4dcd2;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:10px;flex:none;background:var(--paper)}.chapter.active{color:var(--green);font-weight:700}.chapter.active .number{background:var(--green);border-color:var(--green);color:#fff}.chapter.done .number{background:#e5ece1;color:var(--green);border-color:#cbd8c6}.aside-note{border-top:1px solid var(--line);margin-top:28px;padding-top:24px;display:flex;gap:10px;color:#7d877d;font-size:11px;line-height:1.8}.aside-note span{font-size:22px;color:#84997f}.aside-note p{margin:0}.restart{padding-left:0;margin-top:18px;font-size:11px}.guide{background:#fff;border:1px solid #dce2d9;border-radius:18px;overflow:hidden;box-shadow:0 8px 30px #23331f04}.guide-top{padding:20px 26px;display:flex;justify-content:space-between;font-size:11px}.guide-top #stage-label{font-weight:600}.guide-top #counter{color:var(--muted);font-variant-numeric:tabular-nums}.progress-track{height:3px;background:#eef0eb}.progress-track div{background:var(--green);height:100%;transition:width .25s}.guide-body{display:grid;grid-template-columns:47% 53%;min-height:540px}.device-area{background:#edf0e9;display:flex;flex-direction:column;align-items:center;padding:18px 20px 22px;position:relative;border-right:1px solid var(--line)}.device-area:before{content:"";position:absolute;width:220px;height:220px;background:#e0e7d9;border-radius:50%;top:160px;filter:blur(35px)}.device-caption{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;color:#6b7766;width:100%;min-height:26px}.device-caption button{margin-left:auto;border:1px solid #d3dbcc;background:transparent;border-radius:6px;width:28px;height:28px;font-size:19px;color:#53654e}.live-dot{width:5px;height:5px;border-radius:100%;background:#608653;flex:none}#device{width:100%;max-width:285px;position:relative;margin:12px auto 6px;filter:drop-shadow(0 13px 13px #27332025)}.device-legend{font-size:9px;color:#6b7766;display:flex;gap:6px;align-items:center;margin-top:auto;padding-top:14px}.legend-key{width:10px;height:10px;border:2px solid #f0b35d;border-radius:3px}.instruction-area{padding:38px 32px 22px;display:flex;flex-direction:column;min-width:0}.step-tag{color:var(--green);font-size:10px;letter-spacing:1px;font-weight:700;display:flex;align-items:center;gap:8px}.step-tag:before{content:"";width:16px;height:1px;background:var(--green)}h2{font-size:27px;font-weight:600;line-height:1.2;letter-spacing:-.7px;margin:15px 0}#instruction{flex:1}#instruction p{font-size:13px;line-height:1.8;color:#68736e;margin:0 0 17px}#instruction strong{color:var(--ink);font-weight:600}.key-sequence{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:19px 0}.key-chip{background:#f2f3ee;border:1px solid #e1e5db;border-bottom-width:3px;border-radius:6px;min-width:37px;padding:8px 12px;font-size:12px;font-weight:700;text-align:center}.seq-arrow{color:#99a293}.expect{padding:15px;border:1px solid #dde6d5;background:#f5f8f0;border-radius:9px;margin:22px 0}.expect .small-label{margin:0 0 8px;color:#608050;font-size:8px}.expect p{margin:0!important;font-size:12px!important;color:#465e3e!important;line-height:1.7!important}.tip{display:flex;gap:9px;color:#8b9988;font-size:11px;line-height:1.7;margin:18px 0}.tip span{flex:none}.actions{display:flex;gap:9px;margin-top:24px}.primary,.secondary{border-radius:8px;padding:13px 16px;min-height:46px;font-size:12px;font-weight:600}.primary{background:var(--green);color:#fff;border:1px solid var(--green);flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px}.primary:hover{background:#1c503b}.secondary{background:#fff;border:1px solid #dfe5da;color:#596652}.secondary:hover{background:#f3f6ee}.help-button{border:0;background:transparent;color:#7a8475;font-size:10px;line-height:1.5;padding:17px 0 0;text-align:center;width:100%}footer{display:flex;justify-content:space-between;gap:20px;color:#8a9388;font-size:10px;padding:28px 0 24px}footer b{font-weight:600;color:#65715e}footer a{text-decoration:none}#review{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;font-size:11px;color:#7e6142;line-height:1.7}#review summary{cursor:pointer}#review-content{padding:10px 0}#review label{display:block}textarea{width:100%;resize:vertical;font:inherit;border:1px solid #d8ded4;border-radius:5px;padding:9px;margin:5px 0;background:#fffdf9;color:var(--ink)}#review small{display:block;font-size:9px}#export{margin-top:8px;font-size:10px;padding:8px;min-height:36px}dialog{border:1px solid var(--line);border-radius:16px;padding:28px;max-width:460px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 24px 80px #14251840}dialog::backdrop{background:#182a2460;backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-header h2{font-size:20px;margin:0}.dialog-header button{border:0;background:transparent;font-size:26px;color:var(--muted);padding:3px 8px}.dialog-note,dialog p{font-size:12px;line-height:1.8;color:var(--muted)}.help-option{display:block;text-align:left;width:100%;padding:13px;margin:9px 0;background:#f4f6ef;border:1px solid var(--line);border-radius:8px;color:var(--green);font-size:12px}.help-answer{padding:12px;background:#f6f5f1;border-radius:8px;font-size:12px;line-height:1.8;margin-bottom:15px}.help-answer button{margin-top:12px}#zoom-device{max-width:340px;margin:15px auto}#zoom-dialog{text-align:center;max-height:95dvh;overflow:auto}svg{width:100%;display:block}svg text{user-select:none}.key-active{animation:glow 2.5s ease-in-out infinite}.screen-blink{animation:glow 1.5s ease-in-out infinite}@keyframes glow{50%{opacity:.65}}.audit-mark{display:inline-block;font-size:9px;background:#fff0d9;color:#91682b;border-radius:4px;padding:3px 6px;margin-top:10px}.password-guide{font-size:12px;line-height:1.8;color:var(--muted);margin:10px 0}.password-guide summary{cursor:pointer;color:var(--green);font-weight:600}.password-guide ul{padding-left:18px}#storage-message{font-size:10px;margin:0}.zoomed #device{max-width:340px}
@media(min-width:1500px){main{padding-top:60px}.guide-body{min-height:600px}.instruction-area{padding:46px 40px}.device-area{padding:25px}#device{max-width:310px}}
@media(max-width:1150px){.site-header{padding:0 30px}main{padding:32px 30px 0}.workspace{grid-template-columns:160px minmax(0,1fr);gap:22px}.instruction-area{padding:30px 22px}.guide-type{display:none}.device-area{padding:16px 12px}.device-caption{font-size:8px}.device-legend{font-size:8px}h2{font-size:24px}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.chapters{padding:0}.small-label,.aside-note,.restart{display:none}.chapters nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px}.chapter{white-space:nowrap;width:auto;flex:1;font-size:10px;padding:0 0 8px;gap:6px}.chapter .number{width:23px;height:23px}.chapter:after{display:none}.guide-body{min-height:500px}.intro{margin-bottom:26px}.header-label{display:none}.workspace{gap:12px}.guide-top{padding:15px 20px}footer{flex-wrap:wrap;line-height:1.7}footer span:nth-child(2){order:3;width:100%}.expect .small-label{display:block}}
@media(max-width:560px){.site-header{height:73px;padding:0 20px}.brand{font-size:21px}.brand-sub{font-size:6px;left:38px}.site-header .text-button{font-size:9px;padding-right:0}main{padding:25px 14px 0}.intro{margin:0 6px 24px}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:29px;margin:11px 0;letter-spacing:-1.3px}.intro p{font-size:12px;max-width:280px;line-height:1.7}.chapter{flex:none;font-size:10px;margin-right:7px}.guide{border-radius:13px}.guide-body{grid-template-columns:1fr}.device-area{border-right:0;border-bottom:1px solid var(--line);padding:12px 16px 14px}.device-area:before{top:85px;height:180px;width:180px}#device{max-width:224px;margin:3px auto 0}.device-caption{font-size:9px}.device-legend{font-size:9px;padding-top:7px}.instruction-area{padding:25px 22px 21px}h2{font-size:25px;margin:12px 0}#instruction p{font-size:13px}.expect{margin:17px 0}.expect .small-label{font-size:8px}.actions{margin-top:8px}.primary,.secondary{font-size:12px;min-height:48px}.help-button{font-size:11px;padding-top:16px}footer{padding:22px 6px;font-size:9px}.guide-top{font-size:10px;padding:14px 18px}#zoom-device{max-width:280px}dialog{padding:22px}}
.chapters,.guide{min-width:0}
@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr)}.chapters nav{max-width:100%}}
@media(max-width:560px){#device{max-width:200px}.instruction-area{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}