.tips-page{min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);font-family:"Segoe UI",system-ui,sans-serif}
.tips-page main{flex:1}
.tips-hero{position:relative;overflow:hidden;min-height:164px;background:#0d4850 var(--study-art) center 31%/cover no-repeat;color:#fffdf4;border-bottom:1px solid var(--line);image-rendering:auto}
.tips-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,38,45,.88),rgba(3,38,45,.65) 53%,rgba(3,38,45,.04) 85%)}
.tips-hero-inner{position:relative;padding:28px 0 26px}
.tips-hero .eyebrow{font-size:10px;color:#ffc18d;margin:0 0 13px}
.tips-hero h1{font-size:clamp(34px,4.1vw,54px);font-weight:650;letter-spacing:-.055em;line-height:1.05;margin:0}
.tips-hero p:last-child{font-size:14px;line-height:1.45;margin:13px 0 0;color:#edf5ee}
.tips-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;padding-top:21px;padding-bottom:28px;max-width:1180px}
.tips-selector,.tip-detail{border:1px solid var(--line);background:var(--white)}
.tips-selector{padding:17px 0 12px;align-self:start}
.tips-selector h2{margin:0 17px 12px;font-size:15px;letter-spacing:-.02em}
.tip-list{max-height:calc(100dvh - 333px);min-height:350px;overflow-y:auto}
.tip-list button{display:block;width:100%;border:0;border-left:3px solid transparent;background:transparent;color:var(--ink);text-align:left;padding:10px 15px;font:700 12px/1.25 "Segoe UI",system-ui,sans-serif;cursor:pointer}
.tip-list button:hover{background:var(--sage)}
.tip-list button[aria-pressed="true"]{border-left-color:var(--accent);background:var(--sage);color:var(--ink)}
.tip-select-label,#tip-select{display:none}
.tip-detail{display:flex;flex-direction:column;min-height:456px;padding:24px 30px 0}
.tip-category{margin:0 0 9px;color:var(--coral);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.tip-detail h2{font-size:clamp(28px,3.1vw,38px);font-weight:650;letter-spacing:-.045em;line-height:1.1;margin:0 0 8px}
.tip-purpose{font-size:14px;line-height:1.5;color:var(--soft-text);margin:0 0 20px;max-width:680px}
.tip-start{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr);gap:20px;padding:14px 17px;background:var(--sage);border:1px solid var(--line);margin:0 0 19px}
.tip-start h3,.tip-content h3{font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin:0 0 8px}
.tip-start p{font-size:15px;line-height:1.45;margin:0;color:var(--ink)}
.tip-worked,.tip-reference{border-top:1px solid var(--line);padding:12px 0}
.tip-worked summary,.tip-reference summary{cursor:pointer;font-size:14px;font-weight:750;color:var(--teal)}
.tip-worked p,.tip-reference p{font-size:14px;line-height:1.55;color:var(--soft-text);margin:10px 0 0}
.tip-table-wrap{overflow-x:auto;margin-top:13px}
.tip-reference table{width:100%;min-width:640px;border-collapse:collapse;font-size:13px;line-height:1.35;text-align:left}
.tip-reference th,.tip-reference td{border:1px solid var(--line);padding:9px;vertical-align:top}
.tip-reference th{background:var(--sage)}
.tip-content{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(210px,.75fr);gap:30px;border-top:1px solid var(--line);padding-top:20px}
.tip-content h3{font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin:0 0 14px}
.tip-content ol{margin:0;padding-left:24px}
.tip-content li{font-size:14px;line-height:1.5;padding-left:5px;margin:0 0 13px}
.tip-content li::marker{color:var(--coral);font-weight:900}
.tip-checks{border-left:1px solid var(--line);padding-left:24px}
.tip-checks>div+div{border-top:1px solid var(--line);padding-top:16px;margin-top:17px}
.tip-checks p{font-size:13px;line-height:1.5;margin:0;color:var(--soft-text)}
.tip-detail-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);margin-top:auto;padding:16px 0;font-size:12px;color:var(--soft-text)}
.tip-detail-footer a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-weight:800;white-space:nowrap}
.tip-detail-footer a:hover{text-decoration-thickness:2px}
html[data-theme="dark"] .tips-hero::before{background:linear-gradient(90deg,rgba(2,20,29,.74),rgba(2,20,29,.43) 55%,rgba(2,20,29,.02) 85%)}
@media(max-width:780px){.tips-layout{grid-template-columns:1fr}.tips-selector{padding:16px;display:flex;align-items:center;gap:12px}.tips-selector h2{margin:0;white-space:nowrap}.tip-list{display:none}.tip-select-label{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#tip-select{display:block;min-height:42px;width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:8px 10px;font-size:14px}.tip-detail{min-height:410px}}
@media(max-width:560px){.tips-hero{min-height:0}.tips-hero-inner{padding:24px 0}.tips-hero h1{font-size:34px}.tips-hero p:last-child{max-width:250px;font-size:12px}.tips-layout{padding-top:12px;gap:11px}.tips-selector{display:block}.tips-selector h2{margin:0 0 8px}.tip-detail{padding:20px 17px 0}.tip-content{grid-template-columns:1fr;gap:13px}.tip-checks{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}.tip-detail-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.tip-start{grid-template-columns:1fr;gap:12px}}