.project-guide{width:min(700px,86%);margin:48px auto 80px}.project-guide h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.02em;line-height:1.15;margin:40px 0 24px}.project-guide h2{font-size:23px;line-height:1.3;margin:40px 0 16px}.project-guide p,.project-guide li{margin-bottom:14px}.project-guide ul,.project-guide ol{padding-left:24px}.project-guide li{padding-left:4px}.guide-lead{font-size:20px}.project-guide figure{margin:28px 0}.project-guide figcaption{font-size:14px;color:var(--muted);margin-top:12px}.action-flow{list-style:none;padding:0!important;display:grid;gap:12px;counter-reset:step}.action-flow li{border:1px solid var(--line,#d3d9cf);border-radius:10px;padding:18px;margin:0;background:#f1f1e8}.action-flow strong{display:block}.action-flow small{display:block;margin-top:6px}.guide-note{border-left:3px solid #43852d;padding:12px 20px;background:#f1f1e8}.wallet-example{width:240px;height:auto;margin:28px auto}.project-guide code{overflow-wrap:anywhere}.visual-guide{width:min(980px,86%)}.visual-guide header{max-width:680px;margin-top:36px}.visual-guide h1{margin-top:12px}.guide-start{margin:36px 0 48px;padding:24px;background:#f1f2ec;border-radius:12px}.guide-start h2{margin-top:0}.guide-facts{display:grid;grid-template-columns:1fr 1fr;gap:28px}.guide-facts h3,.guide-start>h3{font-size:16px;margin-bottom:8px}.tool-list{padding:0!important;list-style:none;display:flex;gap:36px;margin-bottom:0}.tool-list span:not(.link-label){display:block;font-size:14px;color:var(--muted)}.tool-list strong{font-weight:400}.guide-step{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:32px 0;border-top:1px solid var(--line);align-items:center}.guide-step h3{font-size:22px;margin:8px 0 14px}.step-number{font-size:13px;color:var(--muted);letter-spacing:.08em}.project-guide .setup-visual{margin:0;padding:22px;background:#f1f2ec;border-radius:12px}.visual-label{font-size:11px;letter-spacing:.08em;color:var(--muted);margin-bottom:16px}.setting-row{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.action-block{padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.action-block span{display:block;margin-top:8px;font-size:15px}.action-block em{font-style:normal;background:#e0e9d9;border-radius:4px;padding:2px 4px}.flow-arrow{text-align:center;padding:4px}.reminder-example{background:var(--paper);padding:16px;border-radius:8px}.reminder-example span{color:#43852d;font-size:24px;vertical-align:middle;margin-right:10px}.settings-path{list-style:none;padding:0!important;margin:0}.settings-path li{padding:8px 12px!important;border-bottom:1px solid var(--line);margin:0!important}.settings-path li:after{content:'›';float:right;color:var(--muted)}.settings-path li:last-child:after{content:''}.guide-finish{border-top:1px solid var(--line)}.guide-help{margin:28px 0}.guide-help summary{cursor:pointer}.guide-source{font-size:14px}.guide-help ul{margin-top:16px}@media(max-width:650px){.guide-facts,.guide-step{grid-template-columns:1fr;gap:16px}.tool-list{flex-wrap:wrap;gap:16px 24px}.guide-start{padding:20px}.guide-step{padding:24px 0}.visual-guide h1{font-size:34px}}
.screen-annotation{position:relative;width:195px;max-width:100%;margin:auto}.screen-annotation img{width:100%;height:auto}.screen-marker{position:absolute;top:8.1%;left:56%;width:30px;height:30px;border:2px solid #c45100;border-radius:50%;color:#c45100;background:#faf9f4;display:grid;place-items:center;font-weight:600;transform:translate(-75%,-55%)}.real-screen figcaption{max-width:330px;margin:16px auto 0}
.screenshot-chapter{border-top:1px solid var(--line);padding:28px 0}.screenshot-chapter h3{font-size:24px;margin:8px 0 16px}.screenshot-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;align-items:start}.screenshot-sequence figure{margin:0}.annotated-phone{position:relative;width:100%;max-width:260px;margin:auto}.annotated-phone img{width:100%;height:auto}.tap-ring{position:absolute;border:3px solid #c45100;border-radius:12px;box-shadow:0 0 0 3px #fff;pointer-events:none}.tap-tag{position:absolute;background:#fff;color:#862d00;border:2px solid #c45100;border-radius:6px;padding:3px 8px;font:600 13px/1.3 Mori,Arial,sans-serif;white-space:nowrap}.add-list-ring{left:56%;top:8.4%;width:10%;height:5%}.add-list-tag{left:34%;top:1%}.name-ring{left:8%;top:38.6%;width:84%;height:6.6%}.name-tag{left:30%;top:34.5%}.type-ring{left:62%;top:49.9%;width:31%;height:3.5%}.type-tag{left:38%;top:45.5%}.screenshot-sequence figcaption{font-size:16px;color:var(--ink);margin-top:18px}.screenshot-sequence figcaption>strong:first-child{display:block;margin-bottom:6px}.screenshot-sequence figcaption small{display:block;font-size:12px;margin-top:10px}.missing-shot{min-height:280px;border:1px dashed var(--line);padding:28px;color:var(--muted);border-radius:16px}.preview-note{padding:16px;background:#f1f2ec;border-radius:8px}@media(max-width:800px){.screenshot-sequence{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.screenshot-sequence{grid-template-columns:1fr;gap:36px}.annotated-phone{max-width:280px}}

.home-app-ring{left:52.5%;top:44.2%;width:16%;height:7.4%}.online-name-ring{left:16.8%;top:57.8%;width:66%;height:9%}.online-type-ring{left:64.5%;top:72.8%;width:20%;height:6%}.online-save-ring{left:76%;top:20%;width:10%;height:8%}

.guide-jumps{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0 32px;font-size:15px}.instruction-sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.instruction-sequence figure{margin:0}.instruction-sequence figcaption{font-size:16px;color:var(--ink)}.instruction-sequence figcaption>strong:first-child{display:block;margin-bottom:6px}.action-diagram{padding:24px;background:#edf0e6;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:17px}.reference-phone{position:relative;width:100%;max-width:260px;aspect-ratio:490/1050;overflow:hidden;margin:auto;border-radius:10px}.reference-phone img{position:absolute;width:408.164%;max-width:none;left:-154.082%;top:-3.524%;height:auto}.settings-app-ring{left:72%;top:69%;width:16%;height:8%}.screenshot-chapter>.guide-note{margin-top:28px}.guide-source{margin-top:20px}.guide-note p:last-child{margin-bottom:0}@media(max-width:600px){.instruction-sequence{grid-template-columns:1fr}.reference-phone{max-width:280px}}

/* A single figure width keeps every caption tied to its phone. */
.screenshot-sequence figure,.instruction-sequence figure{width:min(100%,260px);justify-self:center}
.screenshot-sequence figcaption,.instruction-sequence figcaption{width:100%;line-height:1.5}
.tap-ring{border:5px solid #ed0066;box-shadow:0 0 0 3px white,0 0 0 5px #ed0066;border-radius:10px;z-index:2}
.new-list-full,.pair-left,.pair-right{aspect-ratio:490/1008;overflow:hidden;border-radius:36px;background:transparent}
.new-list-full img{position:absolute;width:236.84%;max-width:none;left:-123.68%;top:-7.42%;height:auto}
.new-list-full .online-name-ring{left:11%;top:37.2%;width:79%;height:7%}
.new-list-full .online-type-ring{left:65%;top:48%;width:26%;height:5%}
.new-list-full .online-save-ring{left:80%;top:9%;width:13%;height:6%}
.pair-left img,.pair-right img{position:absolute;width:218%;max-width:none;top:-2.4%;height:auto}
.pair-left img{left:-4.7%}.pair-right img{left:-113.7%}
.phone-detail{aspect-ratio:490/1008;border:8px solid #1e1e1e;border-radius:36px;background:#f2f2f7;display:flex;align-items:center;overflow:hidden;box-sizing:border-box}
.phone-detail:before{content:'';position:absolute;top:10px;left:34%;width:32%;height:15px;background:#161616;border-radius:20px}
.phone-detail:after{content:'';position:absolute;bottom:9px;left:34%;width:32%;height:4px;background:#161616;border-radius:10px}
.phone-detail img{width:100%;height:auto}.detail-label{position:absolute;top:46px;left:0;width:100%;text-align:center;font-size:12px;color:#62666b}
.action-diagram .visual-label{display:block}.final-selection{margin-top:32px}
.test-steps{counter-reset:test;list-style:none;padding:0!important;max-width:680px}.test-steps li{counter-increment:test;position:relative;padding:16px 0 16px 48px;border-bottom:1px solid var(--line);margin:0}.test-steps li:before{content:counter(test);position:absolute;left:0;top:14px;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;display:grid;place-items:center}.test-steps p{margin:6px 0 0}
@media(max-width:520px){.screenshot-sequence figure,.instruction-sequence figure{width:min(100%,280px)}}

.dictation-crop{position:relative;aspect-ratio:946/390;overflow:hidden;width:100%}.dictation-crop img{position:absolute;top:-64%;width:100%;max-width:none;height:auto}


/* Shortcut walkthrough: left-to-right rows, each caption tied to its screen. */
.shortcut-guide{width:min(1100px,90%)}
.shortcut-guide .guide-start{max-width:800px}
.shortcut-guide .screenshot-chapter{padding:36px 0 44px;scroll-margin-top:24px}
.shortcut-guide .chapter-intro{max-width:680px;margin:0 0 28px}
.shortcut-guide .screenshot-sequence{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 56px;counter-reset:flow}
.shortcut-guide .screenshot-sequence figure{position:relative;width:min(100%,260px)}
.shortcut-guide .screenshot-sequence figure:not(:last-child):after{content:'→';position:absolute;right:-45px;top:220px;font-size:28px;line-height:1;color:#65744b}
.shortcut-guide .screenshot-sequence figure:nth-child(3n):after{display:none}
.shortcut-guide .screenshot-sequence figcaption{margin:16px 0 0;font-size:15px;line-height:1.5}
.shortcut-guide figcaption>strong:first-child{font-size:16px;margin-bottom:8px}
.shortcut-guide figcaption p{margin:0 0 8px}
.shortcut-guide .annotated-phone>img{display:block}
.shortcut-guide .phone-detail{aspect-ratio:490/1008}
.shortcut-guide .detail-image{position:relative;width:100%;flex:none}
.shortcut-guide .detail-image img{display:block;width:100%;height:auto}
.shortcut-guide .tap-ring{box-sizing:border-box;border-width:3px;box-shadow:0 0 0 2px #fff,0 0 0 4px #ed0066}
.shortcut-guide .settings-app-ring{left:73%;top:66.5%;width:17%;height:7.7%}
.shortcut-guide .settings-diagram{aspect-ratio:490/1008;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;text-align:center;background:transparent;border-style:dashed;padding:20px}
.shortcut-guide .settings-diagram .visual-label{font-size:11px}
.shortcut-guide .diagram-node{border:1px solid var(--line);background:#edf0e6;padding:14px;width:100%;border-radius:8px;font-size:18px}
.shortcut-guide .diagram-arrow{font-size:28px;color:#65744b}
.shortcut-guide .test-steps{max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px}
.shortcut-guide .test-steps li{border-bottom:0;border-top:1px solid var(--line);padding-top:20px}
@media(max-width:850px){
 .shortcut-guide .screenshot-sequence{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 44px}
 .shortcut-guide .screenshot-sequence figure:nth-child(3n):after{display:block}
 .shortcut-guide .screenshot-sequence figure:nth-child(2n):after,.shortcut-guide .screenshot-sequence figure:last-child:after{display:none}
 .shortcut-guide .screenshot-sequence figure:after{right:-34px}
 .shortcut-guide .test-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
 .shortcut-guide .screenshot-sequence{grid-template-columns:1fr;gap:56px}
 .shortcut-guide .screenshot-sequence figure{width:min(100%,280px)}
 .shortcut-guide .screenshot-sequence figure:not(:last-child):after{display:block;content:'↓';top:auto;bottom:-40px;right:calc(50% - 10px)}
 .shortcut-guide .test-steps{grid-template-columns:1fr;gap:0}
}
@media(min-width:1400px){
 .shortcut-guide{width:min(1280px,92%)}
 .shortcut-guide .screenshot-sequence{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
 .shortcut-guide .screenshot-sequence figure:after{right:-32px}
 .shortcut-guide .screenshot-sequence figure:nth-child(3n):after{display:block}
 .shortcut-guide .screenshot-sequence figure:nth-child(4n):after,.shortcut-guide .screenshot-sequence figure:last-child:after{display:none}
}
@media(min-width:1400px){
 .shortcut-guide .screenshot-sequence:has(>figure:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr));column-gap:36px}
 .shortcut-guide .screenshot-sequence:has(>figure:nth-child(5):last-child)>figure:not(:last-child):after{display:block;right:-28px;top:190px}
}

/* Focus is an optional HTML overlay; source screenshots stay unchanged. */
.shortcut-guide .focus-control{display:flex;align-items:center;gap:10px;margin:0 0 28px;font-size:14px;color:var(--muted);cursor:pointer}
.shortcut-guide .focus-control input{width:18px;height:18px;accent-color:#65744b}
.shortcut-guide .annotation-layer{position:absolute;inset:0;z-index:2;overflow:hidden;clip-path:inset(2% 4% round 24px);pointer-events:none}
.shortcut-guide .detail-image .annotation-layer,.shortcut-guide .dictation-crop .annotation-layer,.shortcut-guide .source-panel .annotation-layer{clip-path:none}
.shortcut-guide:has(#focus-screens:checked) .tap-ring{box-shadow:0 0 0 2px white,0 0 0 4px #ed0066,0 0 0 1500px rgba(250,249,246,.66)}
.shortcut-guide .raw-phone{aspect-ratio:490/1008;border:7px solid #1e1e1e;border-radius:36px;overflow:hidden;box-sizing:border-box;background:#1e1e1e}
.shortcut-guide .raw-phone>img{width:100%;height:100%;object-fit:contain}
.shortcut-guide .raw-phone .annotation-layer{clip-path:inset(0 round 28px)}
.shortcut-guide .source-panel{position:relative;width:100%;aspect-ratio:750/1335;overflow:hidden}
.shortcut-guide .source-panel img{position:absolute;width:300%;max-width:none;height:auto;top:-6.14%}
.shortcut-guide .source-run img{left:-40%}
.shortcut-guide .source-permission img{left:-160%}
.shortcut-guide .spoken-step{max-width:720px;margin:32px auto;padding:24px 28px;border-left:3px solid #65744b;background:#eef0e7}
.shortcut-guide .spoken-step p{margin:8px 0 0}
.shortcut-guide .test-pair{grid-template-columns:repeat(2,minmax(0,260px));justify-content:center;column-gap:56px}
.shortcut-guide .test-pair figure:last-child:after{display:none}
@media(min-width:1400px){
 .shortcut-guide #actions .screenshot-sequence{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin-inline:auto}
 .shortcut-guide #actions figure:nth-child(4n):after{display:block}
 .shortcut-guide #actions figure:nth-child(3n):after{display:none}
}
@media(max-width:580px){.shortcut-guide .test-pair{grid-template-columns:1fr}.shortcut-guide .spoken-step{padding:20px}}
.shortcut-guide .source-framed{clip-path:inset(0 round 11% / 6%)}

/* Reader-tested structure: related actions, small steps, honest source screens. */
.shortcut-guide{width:min(1120px,90%)}
.shortcut-guide .guide-status{font-size:14px;border-left:2px solid var(--line);padding-left:14px;max-width:60ch}
.shortcut-guide .guide-progress{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 0 24px;font-size:14px}
.shortcut-guide button{font:inherit;color:var(--ink);cursor:pointer}
.shortcut-guide #reset-guide,.shortcut-guide .enlarge-screen{border:0;border-bottom:1px solid var(--line);padding:6px 0;background:none;font-size:13px}
.shortcut-guide .screenshot-sequence,.shortcut-guide #actions .screenshot-sequence,.shortcut-guide .screenshot-sequence:has(>figure:nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:none;margin:0}
.shortcut-guide .screenshot-sequence figure{width:min(100%,280px);justify-self:center}
.shortcut-guide .screenshot-sequence figure:after,.shortcut-guide .screenshot-sequence figure:not(:last-child):after{display:none!important}
.shortcut-guide .screenshot-sequence figcaption{font-size:16px;color:var(--ink);line-height:1.5}
.shortcut-guide .action-number{display:block;font-size:13px;letter-spacing:.05em;color:var(--muted);margin-bottom:8px;font-variant-numeric:tabular-nums}
.shortcut-guide .step-done{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:16px;cursor:pointer;min-height:32px}
.shortcut-guide .step-done input{width:18px;height:18px;accent-color:#536a36}
.shortcut-guide .stage-orientation{display:grid;grid-template-columns:280px minmax(0,1fr);gap:64px;align-items:center;margin:28px 0 40px}
.shortcut-guide .stage-orientation .screenshot-sequence{display:block}
.shortcut-guide .stage-orientation h4{font-size:22px;margin:0 0 12px}
.shortcut-guide .stage-orientation p{max-width:43ch}
.shortcut-guide .step-group{margin:36px 0}
.shortcut-guide .group-title{font-size:18px;margin:0 0 16px;font-weight:500}
.shortcut-guide .action-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0}
.shortcut-guide .action-steps>li{padding:18px 0 0;margin:0;border-top:1px solid var(--line);min-width:0;scroll-margin-top:24px}
.shortcut-guide .action-steps h4{font-size:18px;font-weight:500;margin:0 0 10px;line-height:1.35}
.shortcut-guide .action-steps p{font-size:16px;line-height:1.55;margin:0 0 12px}
.shortcut-guide .step-help{margin-top:14px;font-size:14px}
.shortcut-guide .step-help summary{cursor:pointer;color:#536a36;min-height:32px}
.shortcut-guide .step-help p{font-size:14px;padding:8px 0}
.shortcut-guide .checkpoint{margin:32px 0 0;padding:20px 24px;border-left:3px solid #536a36;background:#eef0e7;max-width:760px}
.shortcut-guide .checkpoint p{margin:6px 0 0}
.shortcut-guide .expected-flow{border:1px solid var(--line);border-radius:10px;padding:24px;max-width:760px}
.shortcut-guide .expected-flow h4{font-size:20px;margin:0 0 16px}
.shortcut-guide .expected-flow ol{margin:0;padding-left:24px;display:grid;gap:20px}
.shortcut-guide .expected-flow li{margin:0}.shortcut-guide .expected-flow span{display:block;font-size:16px;margin-top:6px}
.shortcut-guide:has(#focus-screens:checked) .tap-ring{box-shadow:0 0 0 2px white,0 0 0 4px #ed0066,0 0 0 1500px rgba(250,249,246,.25)}
.shortcut-guide input:focus-visible,.shortcut-guide button:focus-visible,.shortcut-guide summary:focus-visible{outline:2px solid #536a36;outline-offset:4px}
#screen-viewer{max-width:90vw;max-height:92vh;padding:18px;border:1px solid #cbd1c2;border-radius:12px;background:#faf9f4;color:#293f31;overflow:auto}
#screen-viewer::backdrop{background:rgba(20,30,20,.72)}
#screen-viewer img{display:block;max-height:72vh;max-width:100%;width:auto;margin:16px auto}
#screen-viewer button{display:block;margin-left:auto;font:inherit;padding:8px 12px;cursor:pointer}
#screen-viewer p{max-width:45ch;font-size:14px}
@media(max-width:850px){.shortcut-guide .screenshot-sequence,.shortcut-guide #actions .screenshot-sequence,.shortcut-guide .screenshot-sequence:has(>figure:nth-child(5):last-child),.shortcut-guide .action-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.shortcut-guide .stage-orientation{gap:32px;grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:580px){.shortcut-guide .screenshot-sequence,.shortcut-guide #actions .screenshot-sequence,.shortcut-guide .screenshot-sequence:has(>figure:nth-child(5):last-child),.shortcut-guide .action-steps,.shortcut-guide .stage-orientation{grid-template-columns:1fr}.shortcut-guide .stage-orientation{gap:28px}.shortcut-guide .guide-progress{align-items:flex-start}.shortcut-guide .action-steps{gap:22px}.shortcut-guide .checkpoint,.shortcut-guide .expected-flow{padding:18px}.shortcut-guide .stage-orientation .screenshot-sequence{display:grid}}
.shortcut-guide .tap-ring{border-color:#ed0066}
.shortcut-guide figcaption>.action-number+strong{display:block;font-size:16px;margin-bottom:8px}
.shortcut-guide .stage-orientation .action-steps{grid-template-columns:1fr;gap:18px}
.shortcut-guide .stage-orientation .step-group{margin-bottom:0}
.shortcut-guide figcaption .enlarge-screen{margin-top:10px}

/* Actual recording frames retain their full portrait aspect ratio. */
.shortcut-guide .recorded-phone{aspect-ratio:1206/2622;border:6px solid #20211f;border-radius:32px;background:#eeedf5;overflow:hidden;width:100%;max-width:none}
.shortcut-guide .recorded-phone>img{display:block;position:static;width:100%;height:100%;object-fit:contain;max-width:none;transform:none}
.shortcut-guide .recorded-phone .annotation-layer{clip-path:none;border-radius:26px;overflow:hidden}
.shortcut-guide .recorded-phone .tap-ring{border-radius:10px}

.shortcut-guide .screenshot-sequence figure{width:min(100%,260px)}

/* Compact, native keyboard-accessible stages. */
.shortcut-guide .guide-stage{padding:0;scroll-margin-top:20px}
.shortcut-guide .guide-stage>summary{display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;padding:24px 0;min-height:80px}
.shortcut-guide .guide-stage>summary::-webkit-details-marker{display:none}
.shortcut-guide .guide-stage>summary:after{content:'+';margin-left:auto;font-size:26px;font-weight:400}
.shortcut-guide .guide-stage[open]>summary:after{content:'−'}
.shortcut-guide .guide-stage>summary h3{font-size:22px;margin:0}
.shortcut-guide .guide-stage>summary .step-number{font-size:13px;white-space:nowrap;letter-spacing:.04em}
.shortcut-guide .guide-stage[open]{padding-bottom:24px}
.shortcut-guide .stage-next{display:inline-block;margin-top:28px;font-size:16px}
.shortcut-guide .step-group{margin:20px 0 32px}
.shortcut-guide .screenshot-sequence{row-gap:32px}
.shortcut-guide .tap-ring{box-shadow:0 0 0 2px white,0 0 0 1500px rgba(250,249,246,.25);border:2px solid #ed0066}
.shortcut-guide .recorded-phone{aspect-ratio:auto}
.shortcut-guide .recorded-phone>img{height:auto}
@media(max-width:580px){.shortcut-guide .guide-stage>summary{gap:12px}.shortcut-guide .guide-stage>summary h3{font-size:19px}}

/* iPhone 17: frame outside the screenshot keeps tap coordinates unchanged. */
.shortcut-guide .iphone17-frame{position:relative;padding:6px;border:2px solid #777b7b;border-radius:39px;background:#121313;box-shadow:0 0 0 1px #bfc1bf,0 6px 16px #00000012}
.shortcut-guide .iphone17-frame:before,.shortcut-guide .iphone17-frame:after{content:"";position:absolute;width:3px;background:#555b59;border-radius:2px;pointer-events:none}
.shortcut-guide .iphone17-frame:before{left:-4px;top:16%;height:5%;box-shadow:0 40px #555b59,0 76px #555b59}
.shortcut-guide .iphone17-frame:after{right:-4px;top:26%;height:11%}
.shortcut-guide .iphone17-frame .recorded-phone{border:0;border-radius:31px;aspect-ratio:1206/2622;width:100%;overflow:hidden;position:relative}
.shortcut-guide .iphone17-frame .recorded-phone>img{width:100%;height:100%;object-fit:contain}
.shortcut-guide .iphone17-frame .annotation-layer{border-radius:31px}
.shortcut-guide .needs-island:after{content:"";position:absolute;top:1.55%;left:34%;width:32%;height:3.7%;border-radius:999px;background:#090909;z-index:3;pointer-events:none}
.shortcut-guide .edited-example{font-size:12px;color:var(--muted)}

/* One device shell for every source; discard baked-in source bezels. */
.shortcut-guide .iphone17-frame .cropped-source>img{position:absolute;max-width:none;object-fit:initial;transform:none}
.shortcut-guide .iphone17-frame .annotation-layer{inset:0;clip-path:none}
.shortcut-guide{width:min(980px,90%);margin-top:32px}
.shortcut-guide header{max-width:680px;margin-top:32px}
.shortcut-guide h1{font-size:clamp(34px,4.5vw,52px);line-height:1.08;max-width:660px;letter-spacing:-.035em}
.shortcut-guide .guide-lead{font-size:19px;line-height:1.5;max-width:610px}
.shortcut-guide .guide-start{max-width:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 24px;background:none;border-radius:0;padding:22px 0;margin:28px 0 38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shortcut-guide .guide-start h2{font-size:14px;margin:0;font-weight:600}
.shortcut-guide .guide-start p{font-size:14px;margin:0;color:var(--muted)}
.shortcut-guide .tool-list{gap:22px;margin:0;font-size:14px}
.shortcut-guide .tool-list li{padding:0;margin:0}
.shortcut-guide #workflow{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:500;margin:0 0 12px}
.shortcut-guide .guide-stage{border-top:1px solid var(--line)}
.shortcut-guide .guide-stage:last-child{border-bottom:1px solid var(--line)}
.shortcut-guide .guide-stage>summary{padding:25px 8px;gap:24px;min-height:86px;transition:background .16s}
.shortcut-guide .guide-stage>summary:hover{background:#edf0e64d}
.shortcut-guide .guide-stage>summary:focus-visible{outline:2px solid #43852d;outline-offset:3px}
.shortcut-guide .guide-stage>summary .step-number{font-size:14px;letter-spacing:0;font-variant-numeric:tabular-nums;color:#707c6a;min-width:24px}
.shortcut-guide .guide-stage>summary h3{font-size:clamp(19px,2.4vw,25px);font-weight:400;line-height:1.3;letter-spacing:-.015em}
.shortcut-guide .guide-stage>summary:after{content:'';width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 8px 5px auto;flex-shrink:0}
.shortcut-guide .guide-stage[open]>summary:after{content:'';transform:rotate(225deg);margin-bottom:-5px}
.shortcut-guide .guide-stage[open]>summary{margin-bottom:18px}
.shortcut-guide .screenshot-sequence{gap:36px 28px}
@media(max-width:580px){.shortcut-guide .guide-start{gap:12px 18px;margin-bottom:28px}.shortcut-guide .tool-list{flex-basis:100%;gap:24px}.shortcut-guide .guide-stage>summary{gap:14px;padding:22px 4px}.shortcut-guide header{margin-top:26px}}
.shortcut-guide .guide-next-step{max-width:660px;margin-top:40px}
.shortcut-guide .guide-next-step h2{font-size:19px;margin:0 0 10px}
.shortcut-guide .guide-next-step p{font-size:16px;line-height:1.6;margin:0}

.shortcut-guide .guide-start{display:block}
.shortcut-guide .guide-start h2{margin-bottom:12px}
.shortcut-guide .guide-start .tool-list{display:grid;gap:8px;list-style:disc;padding-left:20px!important;font-size:16px}

/* Consistent reading flow: pairs on larger screens, single steps on phones. */
.shortcut-guide .screenshot-sequence,
.shortcut-guide #actions .screenshot-sequence,
.shortcut-guide .screenshot-sequence:has(>figure:nth-child(5):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;gap:36px 40px}
.shortcut-guide .screenshot-sequence figure{width:min(100%,clamp(180px,calc((100svh - 250px) * .46),260px))}
.shortcut-guide .confirm-tick-ring{border-color:#e00032;box-shadow:0 0 0 2px white}
.shortcut-guide .guide-masthead{display:flex;justify-content:space-between;align-items:center;gap:24px}
.shortcut-guide .guide-botanical{width:150px;height:auto;flex-shrink:0}
@media(max-width:580px){.shortcut-guide .screenshot-sequence,.shortcut-guide #actions .screenshot-sequence,.shortcut-guide .screenshot-sequence:has(>figure:nth-child(5):last-child){grid-template-columns:1fr}.shortcut-guide .guide-botanical{width:100px}}

/* Target shapes use inner-screen coordinates; source outlines are never doubled. */
.shortcut-guide .recorded-phone .tap-ring{border-radius:7px;border-color:#e00032}
.shortcut-guide .recorded-phone .round-target{border-radius:50%}
.shortcut-guide .recorded-phone .source-highlight{border:0;box-shadow:0 0 0 1500px rgba(250,249,246,.25);border-radius:5px}

.shortcut-guide .guide-botanical{width:320px;max-width:52%;height:auto}
.shortcut-guide .step-completion{display:flex;align-items:center;gap:9px;min-height:36px;width:fit-content;cursor:pointer;margin-bottom:5px}
.shortcut-guide .step-check{appearance:auto;width:20px;height:20px;margin:0;accent-color:#476b39;cursor:pointer;flex-shrink:0}
.shortcut-guide .step-completion .action-number{margin:0;line-height:1}
.shortcut-guide .step-completion:has(:checked) .action-number{color:#476b39;font-weight:600}
.shortcut-guide figcaption>.step-completion+strong{display:block;font-size:16px;line-height:1.5;margin-bottom:8px}
@media(max-width:580px){.shortcut-guide .guide-botanical{width:200px}}

/* Completion belongs to the action; screenshot numbers remain separate. */
.shortcut-guide figcaption>.action-number{display:block;margin-bottom:8px}
.shortcut-guide .step-completion{align-items:flex-start;width:100%;min-height:28px;margin-bottom:8px;gap:10px}
.shortcut-guide .step-completion .step-check{margin-top:2px}
.shortcut-guide .step-completion strong{font-size:16px;line-height:1.5;min-width:0}
.shortcut-guide .step-completion:has(:checked) strong{color:#476b39}