.interface-guide .hero { padding: 64px 0; background: linear-gradient(120deg,#092342,#174775); }
.interface-guide .hero::before { display:none; }
.interface-guide .hero .lead,.interface-guide .hero .meta { color:#e0edfc; }
.interface-guide .hero .eyebrow { color:#8fd6ff; }
.interface-guide .hero h1 { font-size:clamp(32px,4vw,52px); max-width:900px; }
.interface-guide .cover-figure img { max-height:none; object-fit:contain; }
.interface-guide .article-layout { grid-template-columns:minmax(0,1fr) 230px; gap:36px; }
.interface-guide .article-body { min-width:0; font-size:19px; }
.interface-guide .article-body h2,.interface-guide .tool-section { scroll-margin-top:110px; }
.interface-guide .toc { top:105px; max-height:calc(100vh - 130px); overflow:auto; }
.learning-start { background:var(--callout-bg); border:1px solid var(--line); padding:28px; border-radius:20px; }
.learning-start h2 { margin:10px 0 14px!important; }
.lesson-label { color:var(--blue-soft); font-size:15px; font-weight:700; }
.learning-path { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.learning-path a { display:block; padding:16px; background:var(--surface); border-radius:12px; text-decoration:none; }
.learning-path b { display:block; font-size:28px; }
.study-note { margin-bottom:0; font-size:17px; }
.interface-guide .tool-section { padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); margin-top:28px; }
.interface-guide .tool-section h3 { margin-top:0; font-size:26px; }
.ribbon-scroll { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:10px; }
.interface-guide .ribbon-scroll img { width:1600px; max-width:none; border:0; border-radius:0; }
.image-link { display:block; }
.image-hint { display:block; font-size:14px; color:var(--blue); margin-top:8px; }
.interface-guide .article-figure:has(img[src*="properties-palette"]),.interface-guide .article-figure:has(img[src*="project-browser"]) { display:inline-block; vertical-align:top; width:calc(50% - 14px); margin:24px 10px 24px 0; }
.interface-guide .article-figure img[src*="properties-palette"],.interface-guide .article-figure img[src*="project-browser"] { max-width:340px; margin:auto; }
.practice-grid { display:grid; gap:16px; margin:24px 0; }
.practice-grid section { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.practice-grid h3 { margin:8px 0 12px; }
.check-result { border-left:3px solid var(--blue); padding-left:16px; margin-bottom:0; }
.knowledge-check { padding:20px; background:var(--callout-bg); border-radius:14px; }
.knowledge-check summary { cursor:pointer; font-weight:700; }
.knowledge-check p { margin:16px 0 0; }
@media(max-width:900px) { .interface-guide .article-layout { display:flex; flex-direction:column; } .interface-guide .toc { position:static; order:-1; width:100%; max-height:none; } .interface-guide .toc a { display:inline-block; margin-right:18px; } }
@media(max-width:560px) { .learning-path { grid-template-columns:1fr; } .learning-start,.interface-guide .tool-section { padding:20px; } .interface-guide .article-figure:has(img[src*="properties-palette"]),.interface-guide .article-figure:has(img[src*="project-browser"]) { width:100%; } }