body{margin:0;background:var(--paper);color:var(--ink)}
.tips-hero{min-height:660px;padding:clamp(70px,10vw,140px) clamp(22px,7vw,108px) 70px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:7vw;align-items:end}.tips-hero>div,.tips-hero aside{min-width:0;position:relative;z-index:1}.tips-hero h1{margin:25px 0 30px;color:var(--paper);font-size:clamp(62px,10vw,142px);line-height:.84;letter-spacing:0}.tips-hero h1 span{color:var(--lime)}.tips-hero>div>p:last-child{max-width:690px;margin:0;color:#c2c4bd;font-size:clamp(18px,2vw,26px);line-height:1.5}.tips-hero aside{padding:24px;border:1px solid var(--line);color:var(--paper)}.tips-hero aside small,.section-label{font:500 9px DM Mono,monospace;letter-spacing:.11em}.tips-hero aside small{color:var(--coral)}.tips-hero aside p{font-size:21px;line-height:1.5}.tips-hero aside b{color:var(--lime)}.tips-hero aside a{display:block;margin-top:38px;padding-top:14px;border-top:1px solid var(--line);color:var(--paper);font:500 10px DM Mono,monospace;text-decoration:none}
.intro{padding:clamp(70px,9vw,120px) clamp(22px,7vw,108px);display:grid;grid-template-columns:180px minmax(0,1fr);gap:35px;border-bottom:1px solid var(--dark-line)}.section-label{margin:8px 0 0;color:var(--lime-dark)}.intro h2{max-width:850px;margin:0;font-size:clamp(38px,5vw,70px);line-height:1.05;letter-spacing:0}.intro>p:last-child{grid-column:2;max-width:720px;margin:0;color:#555851;font-size:17px;line-height:1.7}
.tips{padding:0 clamp(22px,7vw,108px) clamp(80px,10vw,140px)}.tip-card{display:grid;grid-template-columns:180px minmax(260px,.8fr) minmax(350px,1.2fr);gap:35px;padding:52px 0;border-bottom:1px solid var(--dark-line)}.tip-card header{align-self:start}.tip-card header span{display:block;margin-bottom:20px;color:var(--coral);font:600 11px DM Mono,monospace}.tip-card header p{margin:0;color:#686b64;font:500 9px DM Mono,monospace;letter-spacing:.08em}.tip-card>h2{margin:0;font-size:clamp(30px,4vw,50px);line-height:1}.tip-card>p{grid-column:3;margin:0;color:#4e514b;font-size:16px;line-height:1.7}.example{grid-column:3;padding:22px;border-left:4px solid var(--lime);background:var(--ink);color:var(--paper)}.example+ .example{margin-top:-18px}.example small{color:var(--lime);font:500 8px DM Mono,monospace;letter-spacing:.1em}.example p{margin:9px 0 0;color:#d4d5cf;font:400 13px/1.7 DM Mono,monospace}.warning .example{border-left-color:var(--coral)}.warning .example small{color:var(--coral)}
.template{padding:clamp(70px,9vw,120px) clamp(22px,7vw,108px);display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;background:var(--ink);color:var(--paper)}.template h2{margin:16px 0 24px;font-size:clamp(42px,6vw,78px);letter-spacing:0}.template>div>p:last-child{color:#b2b4ad;line-height:1.7}.template pre{margin:0;padding:30px;overflow:auto;border:1px solid var(--line);background:var(--ink-soft);color:#d7d9d2;font:400 13px/1.8 DM Mono,monospace}.template code{white-space:pre-wrap}.template .section-label{color:var(--coral)}
.closing{padding:clamp(70px,9vw,120px) clamp(22px,7vw,108px);background:var(--lime)}.closing>p{font:500 9px DM Mono,monospace;text-transform:uppercase}.closing h2{margin:15px 0 40px;font-size:clamp(42px,7vw,94px);letter-spacing:0}.closing div{display:flex;gap:12px;flex-wrap:wrap}.closing a{padding:14px 18px;border:1px solid var(--ink);font:600 10px DM Mono,monospace;text-decoration:none;text-transform:uppercase}.closing a:first-child{background:var(--ink);color:var(--paper)}
footer{min-height:130px;padding:35px clamp(22px,7vw,108px);display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper)}footer>a:last-child{font:500 10px DM Mono,monospace;text-decoration:none}
@media(max-width:900px){.tips-hero{grid-template-columns:minmax(0,1fr)}.tips-hero aside{width:100%;max-width:520px}.tip-card{grid-template-columns:110px 1fr}.tip-card>p,.example{grid-column:2}.template{grid-template-columns:1fr}}
@media(max-width:620px){.tips-hero{min-height:620px;padding-top:70px}.tips-hero h1{font-size:clamp(52px,15.5vw,68px);line-height:.92}.tips-hero>div>p:last-child{font-size:17px}.portal-back{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.intro{grid-template-columns:1fr}.intro>p:last-child{grid-column:1}.tip-card{grid-template-columns:1fr;gap:20px}.tip-card>p,.example{grid-column:1}.tip-card header{display:flex;align-items:center;gap:20px}.tip-card header span{margin:0}.example+ .example{margin-top:-8px}.template pre{padding:20px;font-size:11px}.closing div{flex-direction:column}.closing a{text-align:center}footer{align-items:flex-start;flex-direction:column;gap:25px}}