.learn-reference{color:#f1f3ee;width:100%;max-width:1100px;margin:0 auto;padding:36px 28px 80px}.learn-reference *{box-sizing:border-box}:is(.learn-reference a:focus-visible,.learn-reference summary:focus-visible){outline-offset:4px;outline:3px solid #e8ff73}.reference-breadcrumb{color:#b6c1bc;align-items:center;gap:10px;margin-bottom:30px;font-size:13px;line-height:1.8;display:flex}.reference-breadcrumb>a:hover{text-decoration:underline}.reference-heading{max-width:820px;margin-bottom:32px}.reference-heading h1{letter-spacing:-.035em;margin:0 0 14px;font-size:clamp(29px,4vw,44px);font-weight:800;line-height:1.5}.reference-heading>p{color:#c5cdc7;margin:0;font-size:17px;line-height:1.9}.reference-readers{color:#1d2c24;background:#f5f6f1;border-radius:16px;margin:0 0 40px;padding:28px}.reference-readers>figcaption{margin-bottom:24px;font-size:21px;font-weight:750;line-height:1.7}.reader-branches{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.reader-branches>div{background:#fff;border:1px solid #d7dfd2;border-radius:12px;grid-template-columns:44px minmax(0,1fr);gap:0 12px;padding:20px;display:grid}.reader-avatar{color:#466e47;grid-row:span 2;padding-top:3px}.reader-branches h2{margin:0;font-size:17px;font-weight:700;line-height:1.7}.reader-branches p{color:#536151;margin:3px 0 0;font-size:14px;line-height:1.8}.reader-arrow{color:#64815c;grid-column:1/-1;justify-self:center;margin:12px 0;transform:rotate(90deg)}.reader-post{background:#e6efde;border-radius:8px;grid-column:1/-1;align-items:center;gap:12px;padding:15px 12px;font-size:15px;font-weight:650;line-height:1.7;display:flex}.reader-post svg{color:#52723e;flex-shrink:0}.reference-readers>p,.reference-note{color:#65715d;margin:18px 0 0;font-size:13px;line-height:1.85}.reference-section{margin-top:38px}.reference-section>h2{margin:0 0 21px;font-size:25px;font-weight:750;line-height:1.6}.reference-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:0;padding:0;list-style:none;display:grid}.reference-steps>li{background:#242c25;border:1px solid #465144;border-radius:12px;padding:20px 16px;position:relative}.reference-steps>li+li:before{content:"→";color:#b8c9a8;font-size:20px;line-height:1;position:absolute;top:45%;left:-17px}.reference-step-top{color:#e8ff73;justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.reference-step-top>span{color:#b3c0ab;font:12px/1.5 monospace}.reference-steps h3{margin:0 0 10px;font-size:17px;font-weight:700;line-height:1.6}.reference-steps p{color:#c4cec0;margin:0;font-size:14px;line-height:1.9}.reference-section>.reference-note{color:#acb9a3}.reference-practice{border-block:1px solid #404b3e;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:30px 0;display:grid}.reference-tag{color:#d4e598;margin-bottom:9px;font-size:13px;font-weight:700;display:block}.reference-practice h2{margin:0 0 15px;font-size:24px;font-weight:750;line-height:1.65}.reference-practice p{color:#c5cec0;margin:0;font-size:16px;line-height:1.9}.reference-post-example{color:#233123;background:#f5f6f1;border-radius:12px;padding:24px}.reference-post-example>span{color:#637259;font-size:12px}.reference-post-example>p{color:#233123;margin:11px 0 18px;font-size:17px;line-height:1.9}.reference-post-example>a{color:#41643d;text-underline-offset:4px;font-size:14px;text-decoration:underline}.reference-caution{border-left:3px solid #e8ff73;margin:36px 0;padding:5px 0 5px 22px}.reference-caution h2{margin:0 0 12px;font-size:21px;font-weight:700;line-height:1.7}.reference-caution p{color:#c6cec1;margin:0;font-size:15px;line-height:1.95}.reference-caution>a{color:#d4e598;margin-top:13px;font-size:14px;line-height:1.8;display:inline-block}.reference-next{color:#233019;background:#e8ff73;border-radius:12px;justify-content:space-between;align-items:center;gap:25px;margin-top:36px;padding:25px 28px;display:flex}.reference-next h2{margin:0 0 5px;font-size:23px;font-weight:750;line-height:1.7}.reference-next p{color:#46552d;margin:0;font-size:14px;line-height:1.85}.reference-button{color:#fff;white-space:nowrap;background:#233019;border-radius:7px;justify-content:center;align-items:center;gap:24px;min-height:46px;padding:12px 18px;font-size:14px;font-weight:700;display:inline-flex}.reference-footer{border-top:1px solid #404b3e;margin-top:32px;padding-top:22px}.reference-footer>p{color:#aebaa5;margin:0;font-size:12px;line-height:1.9}.reference-footer nav{color:#d4e598;flex-wrap:wrap;gap:12px 24px;margin-top:18px;font-size:13px;display:flex}.reference-footer a:hover{text-decoration:underline}.reference-principles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 34px;display:grid}.reference-principles>div{color:#253322;background:#e8efdf;border-radius:11px;padding:20px}.reference-principles svg{color:#547344;margin-bottom:15px}.reference-principles h2{margin:0 0 7px;font-size:17px;font-weight:750;line-height:1.7}.reference-principles p{color:#52604b;margin:0;font-size:14px;line-height:1.8}.qa-jump{flex-wrap:wrap;gap:9px;margin:0 0 30px;display:flex}.qa-jump>a{color:#d9e4d0;border:1px solid #52604c;border-radius:30px;padding:10px 16px;font-size:14px;line-height:1.7}.qa-jump>a:hover{color:#e8ff73;border-color:#e8ff73}.qa-group{margin-top:32px;scroll-margin-top:100px}.qa-group>h2{margin:0 0 16px;font-size:23px;font-weight:750;line-height:1.7}.qa-group details{color:#243223;background:#f5f6f1;border:1px solid #d3ddcb;border-radius:10px;margin-bottom:10px;overflow:hidden}.qa-group summary{cursor:pointer;justify-content:space-between;align-items:center;gap:18px;padding:18px 21px;font-size:17px;font-weight:650;line-height:1.8;list-style:none;display:flex}.qa-group summary::-webkit-details-marker{display:none}.qa-group summary>span{color:#687c5a;flex-shrink:0;font-size:22px;line-height:1}.qa-group details[open]>summary>span{transform:rotate(45deg)}.qa-group details[open]>summary{border-bottom:1px solid #dce3d5}.qa-group details>p{color:#42523b;margin:0;padding:19px 21px 23px;font-size:16px;line-height:1.95}@media (max-width:780px){.reference-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.reference-steps>li+li:before{display:none}.reference-practice{gap:24px}.reader-branches{gap:16px}.reference-principles{gap:10px}.reference-principles>div{padding:18px 15px}}@media (max-width:580px){.learn-reference{padding:26px 18px 60px}.reference-breadcrumb{margin-bottom:24px}.reference-heading{margin-bottom:26px}.reference-heading>p{font-size:16px}.reference-readers{padding:22px 18px}.reference-readers>figcaption{font-size:20px}.reader-branches{grid-template-columns:1fr}.reader-branches>div{padding:17px}.reference-readers>p{font-size:12px}.reference-section>h2{font-size:23px}.reference-steps{grid-template-columns:1fr;gap:23px}.reference-steps>li{grid-template-columns:42px minmax(0,1fr);gap:0 12px;padding:20px;display:grid}.reference-step-top{grid-row:span 2;margin:2px 0 0;display:block}.reference-step-top>span{margin-top:7px;display:block}.reference-steps h3{margin-bottom:7px;font-size:18px}.reference-steps p{font-size:15px}.reference-steps>li+li:before{content:"↓";color:#afc49b;display:block;top:-24px;left:calc(50% - 10px)}.reference-practice{grid-template-columns:1fr}.reference-caution{padding-left:16px}.reference-next{padding:24px 21px;display:block}.reference-next .reference-button{margin-top:20px;display:flex}.reference-principles{grid-template-columns:1fr;gap:10px}.reference-principles>div{grid-template-columns:28px minmax(0,1fr);gap:0 14px;padding:18px;display:grid}.reference-principles svg{grid-row:span 2;margin:3px 0 0}.reference-principles h2{margin-bottom:4px}.qa-group summary{padding:17px;font-size:16px}.qa-group details>p{padding:16px 17px 21px}.qa-jump>a{padding:9px 13px;font-size:13px}}.reference-reading-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:-8px 0 28px;display:grid}.reference-reading-paths>a{color:#eff5e9;border:1px solid #58674e;border-radius:10px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:16px 18px;font-size:15px;line-height:1.6;display:grid}.reference-reading-paths>a>span{color:#c7d6b9;grid-column:1/-1;font-size:12px;line-height:1.5}.reference-reading-paths>a:hover{background:#2b3828;border-color:#e8ff73}.reader-connection{color:#536e47;grid-column:1/-1;justify-content:center;align-items:center;gap:10px;padding:15px 0;font-size:12px;line-height:1.6;display:flex}.reader-connection>svg{flex:none;width:17px;height:20px;transform:rotate(90deg)}.reference-section{scroll-margin-top:100px}@media (max-width:580px){.reference-reading-paths{grid-template-columns:1fr;gap:9px;margin-bottom:24px}.reference-reading-paths>a{padding:13px 15px}.reader-connection{font-size:12px}}