.skills-page { max-width:1280px; padding-top:80px; }
.skills-header { padding-bottom:76px; }
.skills-header h1 { font-family:"Songti SC","Noto Serif SC",serif; font-size:clamp(38px,4.6vw,68px); font-weight:400; line-height:1.3; letter-spacing:1px; margin:45px 0 28px; }
.skills-header h1 span { color:#999; }
.skills-lead { color:#aaa; font-size:15px; line-height:2; }
.stage-links { display:flex; gap:36px; margin-top:34px; }
.stage-links a { border-bottom:1px solid #444; padding:14px 0; font-size:13px; min-width:160px; }
.stage-links span { float:right; }
.skill-entry { border-top:1px solid #333; padding:56px 0 64px; display:grid; grid-template-columns:30% 1fr; gap:6%; scroll-margin-top:28px; }
.skill-label .eyebrow { color:#888; font-size:10px; letter-spacing:2px; margin-bottom:22px; }
.skill-label h2 { font-weight:400; font-size:32px; margin:0 0 14px; }
.version { color:#888; font-size:10px; letter-spacing:2px; }
.download { margin-top:32px; display:flex; justify-content:space-between; padding:15px 18px; border:1px solid #777; font-size:13px; max-width:220px; }
.download:hover { color:#030303; background:#eee; }
.skill-content h3 { font-size:23px; font-weight:400; line-height:1.5; margin:0 0 16px; }
.skill-content p { color:#aaa; font-size:14px; line-height:1.95; margin:0; }
.feature-list { margin:30px 0; }
.feature-list section { border-top:1px solid #222; padding:20px 0; }
.feature-list h4 { font-size:14px; font-weight:500; margin:0 0 8px; }
.skill-io { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:6px 0 30px; }
.skill-io dt { font-size:11px; letter-spacing:1px; margin-bottom:12px; }
.skill-io dd { color:#ccc; line-height:1.9; margin:0; }
.example { background:#0c0c0c; border-left:2px solid #555; padding:22px 24px; }
.example .eyebrow { color:#888; font-size:10px; margin-bottom:12px; }
details { margin-top:24px; border-bottom:1px solid #333; }
summary { padding:16px 0; cursor:pointer; font-size:12px; color:#aaa; }
summary span { float:right; }
details[open] summary span { transform:rotate(45deg); }
details pre { max-height:520px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.9 ui-monospace,monospace; color:#bbb; background:#0c0c0c; padding:20px; }
.skill-content { min-width:0; }
.usage { border-top:1px solid #333; padding:56px 0 30px; }
.usage h2 { font-size:28px; font-weight:400; margin-bottom:34px; }
.usage ol { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-left:20px; }
.usage li { padding-left:5px; font-size:14px; }
.usage strong { font-weight:500; }
.usage p:not(.eyebrow) { color:#999; font-size:13px; line-height:1.9; }
.back-link { display:inline-block; margin-top:44px; color:#aaa; font-size:12px; padding:10px 0; }
a:focus-visible, summary:focus-visible { outline:2px solid #ddd; outline-offset:6px; }
@media(min-width:1600px) { .skills-page { margin-left:230px; } }
@media(max-width:800px) { .skills-page { padding-top:130px; } .skills-header { padding-bottom:48px; } .skills-header h1 { margin-top:30px; font-size:clamp(27px,7.7vw,38px); } .skill-entry { grid-template-columns:1fr; gap:32px; padding:38px 0 44px; } .skill-label h2 { font-size:28px; } .download { margin-top:22px; } .stage-links { gap:22px; } .stage-links a { min-width:0; flex:1; } .skill-io { grid-template-columns:1fr; gap:20px; } .usage ol { grid-template-columns:1fr; gap:20px; } .usage h2 { font-size:25px; } }