/* Design Hub · reference-led knowledge workbench; values live in tokens.css. */
*{box-sizing:border-box}html{scroll-padding-top:calc(var(--header-height) + 24px)}body{margin:0;background:var(--color-bg);color:var(--color-text);font:16px/1.6 var(--font-body)}button,input,select,textarea{font:inherit;color:inherit}button,a,input,summary{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,summary{cursor:pointer}button{background:none;border:0}button:disabled{cursor:default;opacity:.45}svg{width:20px;height:20px;flex:none;vertical-align:middle}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-display);line-height:1.35;letter-spacing:-.025em}h1{font-size:var(--text-title);font-weight:650}h2{font-size:var(--text-md);font-weight:620}p{color:var(--color-secondary)}::selection{background:var(--color-accent);color:var(--color-on-accent)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}textarea,input,select{min-width:0}textarea{resize:vertical}a,button,summary{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-80px;left:16px;padding:12px 16px;z-index:100;background:var(--color-accent);color:var(--color-on-accent);border-radius:var(--radius)}.skip-link:focus{top:12px}.muted{color:var(--color-muted)}
.topbar{position:sticky;top:0;z-index:30;background:var(--color-bg);border-bottom:1px solid var(--color-border)}.top-inner{max-width:1440px;margin:auto;min-height:68px;padding:0 32px;display:flex;align-items:center;gap:28px}.logo{font-size:20px;font-weight:650;letter-spacing:-.035em;display:flex;align-items:center;gap:6px;white-space:nowrap}.logo>span:last-child{font-weight:400;color:var(--color-secondary);margin-left:-3px}.logo-mark{background:var(--color-accent);color:var(--color-on-accent);width:29px;height:29px;border-radius:6px;display:grid;place-items:center;margin-right:5px}.logo-mark svg{width:18px;height:18px}.primary-nav{display:flex;gap:23px;white-space:nowrap}.nav-link{color:var(--color-secondary);font-size:14px;line-height:68px;position:relative}.nav-link.active{color:var(--color-text);font-weight:600}.nav-link.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--color-accent)}.header-search{position:relative;margin-left:auto;width:360px;flex:1;max-width:430px;display:flex;align-items:center}.header-search>span{position:absolute;left:15px;color:var(--color-muted);display:flex}.header-search svg{width:17px;height:17px}.header-search input{height:42px;width:100%;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-bg);padding:0 15px 0 42px;font-size:14px}.header-search input::placeholder{color:var(--color-muted)}.header-search input:focus{border-color:var(--color-accent);outline:0;box-shadow:0 0 0 2px var(--color-accent-soft)}.header-controls{display:flex;align-items:center;gap:12px}.menu{position:relative}.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;min-width:40px;color:var(--color-secondary);font-size:14px;font-weight:550;border-radius:var(--radius)}.menu summary::-webkit-details-marker{display:none}.menu summary:hover,.icon-button:hover{background:var(--color-hover)}.menu summary svg{width:16px;height:16px}.menu-panel{position:absolute;right:0;top:calc(100% + 12px);width:170px;padding:6px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 28px var(--color-shadow);z-index:35}.menu-panel button{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:10px;border-radius:6px;font-size:14px;min-height:40px}.menu-panel button svg:last-child{margin-left:auto;width:16px}.menu-panel button:hover{background:var(--color-hover)}.menu-label{font-size:12px;color:var(--color-muted);padding:6px 10px}.menu-panel hr{border:0;border-top:1px solid var(--color-border);margin:6px 4px}.accent-dot,.swatch{width:20px;height:20px;border-radius:50%;background:var(--color-accent);display:inline-block;flex:none}.accent-dot{width:19px;height:19px}.swatch.blue{background:var(--swatch-blue,var(--color-accent))}.swatch.violet{background:var(--swatch-violet)}.swatch.green{background:var(--swatch-green)}.swatch.orange{background:var(--swatch-orange)}.color-panel [data-accent][aria-pressed=true]:after{content:'✓';margin-left:auto}.color-panel [data-accent] svg{display:none}.icon-button{padding:0;min-width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius);color:var(--color-secondary)}.icon-button svg{width:22px;height:22px}.mobile-toggle,.mobile-nav{display:none}.suggestions{position:absolute;top:calc(100% + 10px);left:0;right:0;padding:6px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 28px var(--color-shadow)}.suggestions[hidden]{display:none}.suggestions a{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:11px 12px;font-size:14px;border-radius:6px}.suggestions a:hover,.suggestions a.highlighted{background:var(--color-accent-soft);color:var(--color-accent)}.suggestions small{color:var(--color-muted);white-space:nowrap}.suggest-empty{padding:14px;font-size:14px;color:var(--color-muted)}
.container{max-width:1280px;margin:0 auto;padding:0 32px}.catalog-intro{padding:48px 0 32px;display:flex;justify-content:space-between;align-items:end;gap:24px}.preview-label{color:var(--color-muted);font-size:12px;letter-spacing:.06em;font-weight:550;display:block;margin-bottom:12px}.catalog-intro h1{font-size:32px}.catalog-intro p{margin-top:12px;font-size:15px}.intro-action{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;padding:10px 0;color:var(--color-accent);font-size:14px;font-weight:550}.intro-action svg{width:18px}.group-tabs{display:flex;gap:26px;border-bottom:1px solid var(--color-border);overflow:auto;scrollbar-width:none}.group-tabs::-webkit-scrollbar{display:none}.group-tab{display:flex;align-items:center;gap:6px;padding:15px 0;position:relative;color:var(--color-secondary);font-size:14px;white-space:nowrap}.group-tab span{color:var(--color-muted);font:11px var(--font-mono)}.group-tab.selected{color:var(--color-accent);font-weight:600}.group-tab.selected:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--color-accent)}.catalog-layout{display:grid;grid-template-columns:184px minmax(0,1fr);gap:32px;padding:32px 0 64px}.sidebar{align-self:start;position:sticky;top:calc(var(--header-height) + 28px);max-height:calc(100dvh - var(--header-height) - 50px);overflow:auto;scrollbar-width:thin;padding-right:4px}.sidebar-title{font-size:12px;color:var(--color-muted);letter-spacing:.05em;margin:0 12px 12px}.role-list{display:flex;flex-direction:column;gap:2px}.role-item{display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--color-secondary);font-size:13px;padding:9px 12px;border-radius:6px;line-height:1.4;min-height:36px}.role-item span{font:11px var(--font-mono);color:var(--color-muted)}.role-item:hover{background:var(--color-hover)}.role-item.selected{color:var(--color-accent);background:var(--color-accent-soft);font-weight:600}.sidebar-note{border-top:1px solid var(--color-border);margin:20px 12px 0;padding-top:16px;font-size:12px;line-height:1.7;color:var(--color-muted)}.mobile-role{display:none}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px}.section-head h2{font-size:16px;letter-spacing:0}.section-head>span{font-size:13px;color:var(--color-muted)}.term-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.term-card{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg);transition:border-color var(--dur) var(--ease)}.term-card:hover{border-color:var(--color-accent)}.card-main{display:block;padding:24px 20px 0;height:100%}.card-title{padding-right:28px}.card-title h2{font-size:18px;line-height:1.45}.card-title>span{display:block;font-size:12px;color:var(--color-muted);margin-top:3px;min-height:19px;line-height:1.45}.card-phrase{font-size:13px;line-height:1.6;height:44px;margin-top:13px;display:flex;gap:4px;align-items:start;overflow:hidden}.card-phrase>span{font-size:23px;line-height:1.2;color:var(--color-demo-muted)}.favorite{position:absolute;right:11px;top:14px;z-index:2;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius);color:var(--color-demo-muted)}.favorite svg{width:18px;height:18px}.favorite:hover{background:var(--color-hover);color:var(--color-accent)}.favorite.selected{color:var(--color-accent)}.favorite.selected svg{fill:var(--color-accent-soft)}.card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-line);margin-top:16px;padding:12px 0;color:var(--color-muted);font-size:11px}.card-bottom svg{width:16px;height:16px;color:var(--color-accent)}
.diagram{height:152px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:var(--color-surface);border:1px solid var(--color-line);padding:16px;color:var(--color-text);pointer-events:none;font-size:12px;position:relative;isolation:isolate}.diagram.full{height:300px;padding:32px;font-size:15px}.diagram i{display:block;font-style:normal}.diagram .measure{color:var(--color-muted);font-size:9px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;text-align:center}.diagram.full .measure{font-size:12px;margin-top:24px}.diagram i[style*="--line"]{width:var(--line);height:5px;background:var(--color-demo-muted);opacity:.5;border-radius:2px;margin:6px 0}.diagram.full i[style*="--line"]{height:7px;margin:12px 0}.demo-button{display:inline-block;background:var(--color-accent);color:var(--color-on-accent);border-radius:4px;padding:5px 11px;font-weight:550;font-size:10px}.diagram.full .demo-button{padding:9px 17px;font-size:14px}.demo-link{display:inline-block;color:var(--color-muted);font-size:9px;margin-left:9px}.diagram.full .demo-link{font-size:13px}.example-copy{width:100%;max-width:330px}.example-copy strong{display:block;font-size:19px;line-height:1.35;letter-spacing:-.025em}.example-copy p{font-size:10px;margin:5px 0 12px;color:var(--color-muted)}.diagram.full .example-copy strong{font-size:32px}.diagram.full .example-copy p{font-size:14px;margin:12px 0 24px}.example-copy.before strong,.diagram.full .example-copy.before strong{font-size:15px;font-weight:500}.example-copy.before p,.diagram.full .example-copy.before p{font-size:15px;color:var(--color-text)}.example-copy.before .demo-button{background:var(--color-demo-muted)}.example-copy.before .demo-link{font-size:14px;color:var(--color-text)}.kern{font:32px var(--font-body);letter-spacing:.18em;margin-left:.18em}.kern.good{letter-spacing:-.04em;margin-left:0}.diagram.full .kern{font-size:72px}.measure i{height:1px;width:16px;background:var(--color-border)}.example-form{width:85%;max-width:290px}.example-form label{font-size:9px;display:block;margin:8px 0 4px;color:var(--color-secondary)}.fake-input{display:block;border:1px solid var(--color-border);background:var(--color-bg);padding:4px 9px;font-size:10px;border-radius:3px;color:var(--color-muted)}.example-form.before label{margin:2px 0}.example-form.before .fake-input{padding:1px 9px}.diagram.full .example-form label{font-size:13px;margin:20px 0 7px}.diagram.full .example-form .fake-input{font-size:14px;padding:7px 12px}.diagram.full .example-form.before label{margin:2px 0}.diagram.full .example-form.before .fake-input{padding:3px 12px}.contrast-copy{width:100%;max-width:330px}.contrast-copy strong{font-size:16px}.contrast-copy p{font-size:10px;margin:7px 0 15px}.contrast-copy.before{color:var(--color-demo-muted)}.contrast-copy.before p{color:var(--color-demo-muted);opacity:.55}.diagram.full .contrast-copy strong{font-size:26px}.diagram.full .contrast-copy p{font-size:15px}.alignment-example{width:85%;max-width:270px}.alignment-example strong{font-size:12px;display:block;margin-bottom:10px}.alignment-example.before strong{transform:translateX(25px)}.alignment-example.before>div{transform:translateX(-12px)}.alignment-example.before .demo-button{transform:translateX(54px)}.alignment-example .demo-button{margin-top:8px}.diagram.full .alignment-example strong{font-size:20px}.material-row{display:flex;gap:12px;width:100%;justify-content:center}.sample{height:75px;width:58px;border-radius:6px;display:flex;align-items:end;padding:7px;color:var(--color-text)}.sample.sand{background:var(--color-sand)}.sample.sage{background:var(--color-sage)}.sample.slate{background:var(--color-slate);color:var(--color-on-accent)}.sample span{font:9px var(--font-mono)}.diagram.full .sample{height:150px;width:110px;padding:12px}.diagram.full .sample span{font-size:13px}.responsive-example{display:flex;align-items:center;gap:14px}.wide-layout,.narrow-layout{width:130px;border:1px solid var(--color-border);padding:12px;background:var(--color-bg);display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.wide-layout i[style*="--line"],.narrow-layout i[style*="--line"]{width:100%;height:30px;background:var(--color-accent);opacity:.5;margin:0}.narrow-layout{width:44px;grid-template-columns:1fr;padding:7px;gap:4px}.narrow-layout i[style*="--line"]{height:16px}.diagram.full .wide-layout{width:220px;padding:18px}.diagram.full .narrow-layout{width:80px;padding:12px}.diagram.full .wide-layout i{height:66px}.diagram.full .narrow-layout i{height:28px}.button-examples{display:flex;align-items:center;gap:8px}.secondary-demo{border:1px solid var(--color-border);border-radius:4px;padding:4px 10px;font-size:10px}.state-dots{display:flex;gap:12px;margin-top:18px}.state-dots span{width:8px;height:8px;background:var(--color-accent);border-radius:50%}.state-dots span:nth-child(2){opacity:.65}.state-dots span:nth-child(3){opacity:.3}.feedback-flow{display:flex;gap:10px;align-items:center;font-size:12px}.feedback-flow .success{display:flex;align-items:center;gap:4px;color:var(--color-success);border:1px solid var(--color-success);border-radius:4px;padding:6px 10px}.feedback-flow svg{width:14px;height:14px}.baseline-example{display:flex;width:100%;max-width:290px;gap:16px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 15px,var(--color-grid) 15px,var(--color-grid) 16px);padding:4px 0}.baseline-example>div{width:50%}.baseline-example i[style*="--line"]{height:4px;margin:12px 0}.chart-example{height:104px;width:85%;max-width:320px;display:flex;align-items:end;gap:13px;border-bottom:1px solid var(--color-border);padding:0 8px}.chart-example>span{position:relative;flex:1;height:var(--height);background:var(--color-accent);border-radius:3px 3px 0 0;opacity:.7}.chart-example>span:last-child{opacity:1}.chart-example b{font:9px var(--font-mono);position:absolute;bottom:5px;left:0;right:0;text-align:center;color:var(--color-on-accent)}.shape-example{display:flex;gap:20px;align-items:center}.shape-example i{width:42px;height:42px;background:var(--color-sand)}.shape-example i:first-child{border-radius:50%;background:var(--color-sage)}.shape-example i:last-child{clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--color-slate)}.curve{width:90%;height:auto;max-width:320px;overflow:visible}.curve-grid{stroke:var(--color-border);stroke-width:1;fill:none}.curve-line{stroke:var(--color-accent);stroke-width:3;fill:none}.mesh-example{width:94px;height:94px;transform:rotate(30deg);border:1px solid var(--color-accent);border-radius:36%;background:repeating-linear-gradient(0deg,transparent 0,transparent 14px,var(--color-grid) 14px,var(--color-grid) 15px),repeating-linear-gradient(90deg,transparent 0,transparent 14px,var(--color-grid) 14px,var(--color-grid) 15px)}.dieline{display:flex;align-items:center;position:relative}.dieline i{width:42px;height:63px;border:1px dashed var(--color-accent);border-right:0;background:var(--color-accent-soft)}.dieline i:last-child{border-right:1px dashed var(--color-accent)}.dieline i:nth-child(2):after,.dieline i:nth-child(2):before{content:'';position:absolute;left:42px;width:42px;height:23px;border:1px dashed var(--color-accent);background:var(--color-accent-soft);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}.dieline i:nth-child(2):before{top:-23px}.dieline i:nth-child(2):after{bottom:-23px;transform:rotate(180deg)}.plan-example{position:relative;width:166px;height:100px;border:2px solid var(--color-slate);display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px}.plan-example i{border:1px solid var(--color-demo-muted);background:var(--color-accent-soft)}.plan-example i:last-child{grid-column:1 / -1;height:12px}.plan-example>span{position:absolute;top:28px;left:63px;font-size:34px;color:var(--color-accent)}.sign-example{display:flex;flex-direction:column;gap:8px;width:150px}.sign-example>span{padding:7px 12px;background:var(--color-slate);color:var(--color-on-accent);font-size:12px}.jewel-example{width:90px;height:80px;position:relative}.jewel-example i{width:66px;height:66px;border:9px solid var(--color-sand);border-radius:50%;position:absolute;bottom:0;left:12px}.jewel-example span{width:28px;height:28px;background:var(--color-accent);position:absolute;top:0;left:31px;transform:rotate(45deg);border:3px solid var(--color-border)}.light-example{display:flex;gap:13px}.light-example i{width:47px;height:60px;border-radius:50% 50% 7px 7px;background:var(--color-sand);box-shadow:0 0 18px var(--color-sand)}.light-example i:nth-child(2){background:var(--color-bg);border:1px solid var(--color-border);box-shadow:0 0 18px var(--color-shadow)}.light-example i:last-child{background:var(--color-slate);box-shadow:0 0 18px var(--color-slate)}.product-example{width:160px;height:92px;position:relative}.product-example i{width:75px;height:72px;border-radius:38px 38px 16px 16px;background:var(--color-sage);position:absolute;left:22px;top:12px;transform:rotate(-14deg)}.product-example b{width:46px;height:58px;background:var(--color-sand);border-radius:5px;position:absolute;right:18px;bottom:0;transform:rotate(12deg)}.brand-example{width:100%;max-width:260px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.brand-example>strong{font-size:30px;letter-spacing:-.06em}.brand-example>div{grid-column:1 / -1;border-top:1px solid var(--color-border);padding-top:8px;font-size:18px}.brand-example small{font-size:9px;margin-left:12px;color:var(--color-muted)}.balance-example{display:flex;gap:18px;align-items:center;width:100%;max-width:340px}.balance-example>div{width:48%}.balance-example>i{width:45%;height:80px;background:var(--color-sand);border-radius:35% 35% 6px 6px}.balance-example.before>div{width:24%}.balance-example.before>i{width:72%;height:150px}.diagram.full .balance-example.after>i{height:145px}.research-example{display:flex;align-items:center;gap:12px;width:90%}.research-example>div:first-child{padding:10px;border:1px solid var(--color-border);border-radius:50%;color:var(--color-accent)}.research-example>div:nth-child(2){flex:1}.research-example>span{font:26px var(--font-mono);color:var(--color-accent)}.copy-example{width:100%;max-width:320px}.error-label{font-size:12px;color:var(--color-error)}.copy-example p{font-size:10px;margin-top:7px}.brief-example{width:90%;max-width:300px;display:flex;flex-direction:column;gap:9px}.brief-example>span{display:flex;align-items:center;gap:14px;color:var(--color-muted);font-size:10px}.brief-example i{flex:1;height:5px;background:var(--color-border);border-radius:2px}.blueprint-example{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}.blueprint-example>div{display:flex;align-items:center;gap:10px;border-bottom:1px dashed var(--color-border);padding-bottom:7px}.blueprint-example span{font-size:9px;width:34px;flex:none;color:var(--color-muted)}.blueprint-example i{height:15px;flex:1;border:1px solid var(--color-border);background:var(--color-accent-soft)}.flow-example{display:flex;align-items:center;gap:10px}.flow-example span{padding:6px 9px;border:1px solid var(--color-border);border-radius:4px;font-size:9px}.flow-example i{color:var(--color-accent)}
.list-page{padding-top:48px;padding-bottom:64px;min-height:calc(100dvh - 160px)}.page-intro{font-size:16px;line-height:1.7;max-width:760px;margin-top:16px}.problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}.problem-card{border-top:1px solid var(--color-border);padding:22px 0 16px}.problem-number{font:12px var(--font-mono);color:var(--color-muted)}.problem-card h2{margin-top:18px;font-size:22px}.problem-card p{font-size:14px;margin-top:12px;min-height:48px}.problem-bottom{margin-top:24px;display:flex;justify-content:space-between;align-items:center;color:var(--color-muted);font-size:12px}.problem-bottom svg{color:var(--color-accent)}.problem-card:hover h2{color:var(--color-accent)}.cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}.case-card>.diagram.full{height:235px;padding:24px}.case-card>div:last-child{padding:22px 0}.case-card h2{font-size:20px;margin-bottom:12px}.case-card p{font-size:14px;margin-bottom:24px}.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--color-accent);font-size:14px}.case-card:hover h2{color:var(--color-accent)}
.detail{padding-top:26px;padding-bottom:64px;max-width:1120px;min-height:calc(100dvh - 160px)}.breadcrumbs{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--color-muted);margin-bottom:36px}.breadcrumbs>a{display:inline-flex;align-items:center;gap:8px}.breadcrumbs svg{width:16px}.detail-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.english-name{font-size:18px;color:var(--color-muted);margin-top:8px}.detail-layout{display:grid;grid-template-columns:minmax(0,760px) 160px;gap:64px;margin-top:32px}.detail-body{min-width:0}.detail-body blockquote{margin:0 0 24px;padding:20px 24px;border-left:2px solid var(--color-accent);background:var(--color-surface);font-size:22px;line-height:1.6}.detail-body blockquote>span{display:block;color:var(--color-muted);font-size:12px;margin-bottom:7px}.detail-definition{font-size:18px;line-height:1.85;margin-bottom:24px}.role-tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 28px}.role-tags a{font-size:12px;color:var(--color-muted);padding:3px 8px;border:1px solid var(--color-border);border-radius:4px}.detail-body>section{margin-top:36px;padding-bottom:32px;border-bottom:1px solid var(--color-border)}.detail-body>section h2{margin-bottom:16px}.detail-body>section p{margin-top:12px}.detail-body>section .text-link{margin-top:18px}.detail-toc{position:sticky;align-self:start;top:calc(var(--header-height) + 32px);display:flex;flex-direction:column;gap:12px;padding-left:20px;border-left:1px solid var(--color-border);font-size:13px;color:var(--color-secondary)}.detail-toc>span{font-size:11px;color:var(--color-muted);margin-bottom:6px}.detail-toc a:hover{color:var(--color-accent)}.interactive-demo{margin-top:26px;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.demo-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;gap:12px;border-bottom:1px solid var(--color-border);font-size:12px;color:var(--color-muted)}.segmented{display:flex;padding:3px;background:var(--color-hover);border-radius:6px;gap:3px;flex:none}.segmented button{font-size:12px;padding:5px 12px;border-radius:4px;color:var(--color-secondary)}.segmented button[aria-pressed=true]{background:var(--color-bg);box-shadow:0 1px 3px var(--color-shadow);color:var(--color-accent)}.demo-stage .diagram{border:0;border-radius:0;height:310px;background:var(--color-bg)}.demo-caption{padding:14px 16px;background:var(--color-surface);border-top:1px solid var(--color-border);font-size:12px}.request-box{padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.request-box p{margin:0!important}.request-box .button{margin-top:18px}.related-terms{display:flex;flex-direction:column;gap:8px}.related-term{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);font-size:14px}.related-term svg{color:var(--color-accent)}.step-row{display:flex;gap:16px;align-items:start;margin:22px 0}.step-row>span{font:13px var(--font-mono);width:28px;height:28px;background:var(--color-accent-soft);border-radius:50%;color:var(--color-accent);display:grid;place-items:center;flex:none;margin-top:2px}.step-row strong{font-size:16px;font-weight:600}.step-row p{font-size:15px;margin-top:5px!important;line-height:1.7}.bottom-action{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0}.bottom-action h2{font-size:18px;margin-bottom:8px}.bottom-action p{font-size:14px}.bottom-action .button{flex:none}.case-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}.case-comparison h2{font-size:14px;color:var(--color-muted);margin-bottom:12px;font-weight:500}.case-reading{max-width:760px;margin:40px auto 0}.case-reading>h2{margin:32px 0 16px}.case-reading>.button{margin-top:24px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 16px;border-radius:var(--radius);font-size:14px;line-height:1.5;font-weight:550;border:1px solid transparent}.button svg{width:17px;height:17px}.button.primary{background:var(--color-accent);color:var(--color-on-accent)}.button.primary:hover{filter:brightness(.94)}.button.secondary{border-color:var(--color-border);background:var(--color-bg);color:var(--color-secondary)}.button.secondary:hover{background:var(--color-hover)}.text-button{color:var(--color-muted);font-size:13px;padding:0}.text-button:hover{color:var(--color-accent)}.describe-page{padding-top:48px;padding-bottom:64px}.describe-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:40px}.brief-form{min-width:0}.brief-form fieldset{padding:0;border:0;margin:0 0 28px;min-width:0}.brief-form legend{font-size:18px;font-weight:600;margin-bottom:20px}.brief-form label{display:block;font-size:14px;color:var(--color-secondary);margin-bottom:18px}.brief-form input,.brief-form textarea,.brief-form select{display:block;width:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:10px 12px;margin-top:8px;line-height:1.5;font-size:14px;min-height:42px}.brief-form input::placeholder,.brief-form textarea::placeholder{color:var(--color-muted);opacity:.9}.brief-form input:focus,.brief-form textarea:focus,.brief-form select:focus,#brief-output:focus{border-color:var(--color-accent);outline:0;box-shadow:0 0 0 2px var(--color-accent-soft)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-note{font-size:12px;margin-top:12px;color:var(--color-muted)}.output-panel{align-self:start;position:sticky;top:calc(var(--header-height) + 32px);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);overflow:hidden}.output-head{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--color-border)}.output-head h2{font-size:16px;letter-spacing:0}.small-badge{display:inline-block;color:var(--color-muted);font-size:11px;padding:2px 7px;border:1px solid var(--color-border);border-radius:4px;white-space:nowrap}#brief-output{display:block;width:calc(100% - 48px);margin:24px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);font-size:14px;line-height:1.9;padding:16px;min-height:320px;color:var(--color-secondary)}#brief-output::placeholder{color:var(--color-muted)}.output-actions{display:flex;gap:12px;padding:0 24px 24px}.output-help{padding:20px 24px;border-top:1px solid var(--color-border)}.output-help strong{font-size:13px;font-weight:550}.output-help p{font-size:12px;margin-top:8px;line-height:1.8;color:var(--color-muted)}.search-results{margin-top:36px;max-width:880px}.search-results>a{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--color-border);padding:24px 0}.search-results h2{font-size:20px;margin:10px 0}.search-results p{font-size:14px;line-height:1.7}.search-results>a>svg{color:var(--color-accent)}.empty{padding:80px 24px;text-align:center}.empty>svg{width:32px;height:32px;color:var(--color-muted);margin-bottom:20px}.empty h2{font-size:22px}.empty p{margin:12px auto 24px;font-size:14px;max-width:460px}.footer{max-width:1280px;margin:auto;padding:28px 32px;border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px;color:var(--color-secondary)}.footer>div{display:flex;align-items:center;gap:24px}.footer .text-button{font-size:12px}.local-dot{display:inline-flex;gap:6px;align-items:center;color:var(--color-muted);white-space:nowrap}.local-dot:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--color-success)}#notice{position:fixed;bottom:28px;left:50%;transform:translate(-50%,10px);background:var(--color-text);color:var(--color-bg);border-radius:var(--radius);padding:12px 18px;max-width:calc(100% - 32px);width:max-content;font-size:13px;opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur);z-index:60;box-shadow:0 4px 16px var(--color-shadow)}#notice.visible{opacity:1;transform:translate(-50%,0)}
.definition{font-size:18px;line-height:1.85;margin-bottom:24px}.request-block{padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.request-block p{margin:0!important}.request-block .button{margin-top:18px}.related-links{display:flex;flex-direction:column;gap:8px}.related-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);font-size:14px}.related-links svg{color:var(--color-accent)}
@media(min-width:1440px){.top-inner{gap:32px}.primary-nav{gap:25px}.header-controls{gap:16px}}
@media(max-width:1279px){.top-inner{gap:20px;padding:0 24px}.primary-nav{gap:16px}.term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.diagram{height:170px}.catalog-layout{grid-template-columns:172px minmax(0,1fr);gap:24px}.detail-layout{gap:32px}.header-search{max-width:340px}.header-controls{gap:6px}.cases-grid{gap:20px}}
@media(max-width:1151px){.top-inner{flex-wrap:wrap;gap:0 24px;padding-top:10px;padding-bottom:10px}.logo{order:0}.header-controls{order:1;margin-left:auto}.primary-nav{order:3;gap:24px}.nav-link{line-height:40px}.header-search{order:2;margin-left:0;max-width:none;flex-basis:100%;height:42px;margin-top:8px}.primary-nav{display:none}.mobile-toggle{display:grid}.mobile-nav.open{display:flex;flex-wrap:wrap;gap:12px 24px;padding:16px 24px;border-top:1px solid var(--color-border);font-size:14px}.mobile-colors{display:none}.catalog-intro{padding-top:40px}.catalog-intro h1{font-size:30px}.describe-layout{gap:32px}.cases-grid{grid-template-columns:1fr 1fr}.detail-toc{display:none}.detail-layout{grid-template-columns:minmax(0,1fr);max-width:760px}.footer{align-items:start}.footer>div{gap:16px}}
@media(max-width:767px){.container{padding-left:20px;padding-right:20px}.top-inner{padding-left:20px;padding-right:20px}.logo{font-size:19px}.header-controls{gap:2px}.menu summary{min-width:36px}.language-menu summary{padding:0 5px}.icon-button{min-width:36px}.accent-menu{display:none}.mobile-nav.open{padding:16px 20px;gap:14px 24px}.mobile-colors{display:flex;align-items:center;width:100%;gap:8px;border-top:1px solid var(--color-line);padding-top:12px}.color-choice{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.color-choice[aria-pressed=true]{outline:1px solid var(--color-accent);outline-offset:-3px}.mobile-colors>.text-button{margin-left:8px}.catalog-intro{display:block;padding:32px 0 20px}.catalog-intro h1{font-size:28px;line-height:1.4}.catalog-intro p{font-size:14px;line-height:1.8}.intro-action{padding-top:18px;padding-bottom:0}.group-tabs{gap:22px;margin-right:-20px;padding-right:20px}.group-tab{font-size:13px;padding:15px 0}.catalog-layout{grid-template-columns:1fr;gap:24px;padding:24px 0 40px}.sidebar{position:static;max-height:none;overflow:visible;padding:0}.sidebar-title{margin:0 0 8px;font-size:11px}.role-list,.sidebar-note{display:none}.mobile-role{display:block;width:100%;border:1px solid var(--color-border);background:var(--color-bg);border-radius:var(--radius);padding:10px 12px;font-size:14px}.term-grid{gap:16px}.card-main{padding:22px 16px 0}.card-title h2{font-size:18px}.card-phrase{font-size:13px}.card-bottom{font-size:11px}.section-head{margin-bottom:16px}.diagram{height:160px}.preview-label{font-size:10px;margin-bottom:10px}.list-page,.describe-page{padding-top:32px;padding-bottom:40px}h1{font-size:28px}.page-intro{font-size:14px;margin-top:12px}.problem-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}.problem-card h2{font-size:19px;margin-top:14px}.problem-card p{font-size:13px}.problem-bottom{font-size:11px}.cases-grid{grid-template-columns:1fr;gap:24px;margin-top:28px}.case-card>.diagram.full{height:255px}.case-card>div:last-child{padding:18px 0}.detail{padding-top:20px;padding-bottom:40px}.breadcrumbs{margin-bottom:26px;gap:8px}.detail-heading{align-items:start}.detail-heading>.button{min-height:36px;padding:7px 10px;font-size:12px}.detail-heading>.button svg{width:15px;height:15px}.english-name{font-size:16px}.detail-layout{margin-top:24px}.detail-body blockquote{font-size:19px;padding:16px}.detail-definition{font-size:16px}.diagram.full{height:260px;padding:24px}.diagram.full .example-copy strong{font-size:28px}.diagram.full .example-copy p{font-size:13px}.diagram.full .kern{font-size:58px}.demo-stage .diagram{height:270px}.demo-toolbar{padding:12px;flex-wrap:wrap}.demo-caption{font-size:11px;padding:12px}.detail-body>section{margin-top:28px;padding-bottom:24px}.detail-body>section p{font-size:14px}.bottom-action{display:block;padding:24px 0}.bottom-action .button{margin-top:16px}.case-comparison{grid-template-columns:1fr;gap:20px;margin-top:28px}.case-reading{margin-top:28px}.describe-layout{grid-template-columns:1fr;gap:32px;margin-top:28px}.brief-form legend{font-size:17px}.output-panel{position:static}.output-head{padding:18px}.output-head h2{font-size:15px}#brief-output{width:calc(100% - 36px);margin:18px;min-height:300px}.output-actions{padding:0 18px 18px}.output-help{padding:18px}.footer{display:block;padding:24px 20px}.footer>span{display:block;margin-bottom:16px}.footer>div{flex-wrap:wrap;gap:16px}.footer .muted{display:block;margin-top:3px}.search-results>a{gap:16px;padding:20px 0}.search-results h2{font-size:18px}.empty{padding:48px 16px}}
@media(max-width:539px){.term-grid{grid-template-columns:1fr}.card-main{padding:22px 22px 0}.diagram{height:185px}.card-phrase{height:auto;min-height:32px;margin-top:12px;margin-bottom:10px}.card-title h2{font-size:20px}.card-title>span{font-size:13px}.card-bottom{padding:14px 0;font-size:12px}.favorite{right:15px;top:16px}.example-copy{max-width:250px}.example-copy strong{font-size:23px}.example-copy p{font-size:11px}.demo-button{font-size:11px}.problem-grid{grid-template-columns:1fr;gap:4px}.problem-card{padding:20px 0}.problem-card h2{font-size:21px}.problem-card p{min-height:0;font-size:14px}.problem-bottom{margin-top:16px;font-size:12px}.field-grid{grid-template-columns:1fr;gap:0}.detail-heading>.button{font-size:0;width:38px;height:38px;padding:8px}.detail-heading>.button svg{width:20px;height:20px}.diagram.full .responsive-example{gap:10px}.diagram.full .wide-layout{width:150px}.diagram.full .narrow-layout{width:58px}.diagram.full .kern{font-size:48px}.diagram.full .example-copy strong{font-size:26px}.diagram.full .sample{width:64px;height:120px}.demo-toolbar>span{font-size:11px}.diagram.full .example-copy.before strong{font-size:15px}}
@media(max-width:359px){.container,.top-inner{padding-left:16px;padding-right:16px}.logo{font-size:17px}.logo-mark{width:26px;height:26px}.header-controls{gap:0}.icon-button{min-width:32px}.menu summary{min-width:32px;font-size:13px}.language-menu summary svg{width:13px}.catalog-intro h1{font-size:25px}.group-tabs{margin-right:-16px;padding-right:16px}.card-main{padding:20px 18px 0}.output-head{display:block}.output-head .small-badge{margin-top:8px}.diagram.full{padding:20px}.flow-example{gap:7px}.diagram.full .example-copy strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Catalog and shared navigation: measured against VibeHub, 2026-10-11.
   Keep original Design Hub content and illustrations; match layout and interaction. */
body{font-size:15px;line-height:1.7;letter-spacing:.1px;-webkit-font-smoothing:antialiased}
.topbar{height:var(--header-height);background:color-mix(in srgb,var(--color-bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-line)}
.top-inner{max-width:none;height:100%;padding:0 32px;display:flex;flex-wrap:nowrap;gap:10px;align-items:center}
.logo{gap:6px;font-size:16px;line-height:1;letter-spacing:-.72px;font-weight:790;order:0;flex:none}
.logo-mark{width:20px;height:20px;border-radius:5px;transition:transform .25s var(--ease)}
.logo-mark svg{width:14px;height:14px}.logo-word{color:var(--color-text)!important}
.logo:hover .logo-mark{transform:rotate(-7deg)}
.primary-nav{display:flex;order:0;gap:4px;margin-left:10px;white-space:nowrap}
.nav-link{font-size:14px;font-weight:550;line-height:20px;min-height:34px;padding:7px 11px;border-radius:8px;color:var(--color-secondary);transition:color .2s var(--ease),background-color .2s var(--ease)}
.nav-link.active{font-weight:650;background:var(--color-hover);color:var(--color-text)}
.nav-link.active:after{display:none}.nav-link:hover{color:var(--color-text);background:var(--color-surface)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;min-width:0}
.header-search{order:0;flex:0 1 360px;width:min(360px,30vw);max-width:none;height:36px;min-width:0;margin:0;padding:0 12px;gap:8px;border-radius:999px;background:color-mix(in srgb,var(--color-bg) 94%,transparent);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.header-search>span{display:flex}.header-search svg{width:15px;height:15px}.header-search input{font-size:13px;line-height:20px;width:100%;min-width:0;padding:0}
.header-controls{order:0;margin:0;gap:16px;display:flex;align-items:center;flex:none}
.menu summary{height:34px;min-width:0;padding:6px 9px;gap:6px;font-size:13px;font-weight:600;line-height:20px;border-radius:8px;transition:background-color .2s var(--ease),color .2s var(--ease)}
.language-menu summary svg{width:12px;height:12px;margin-right:-6px}.language-menu summary:hover{background:var(--color-surface);color:var(--color-text)}
.accent-menu{display:block}.accent-menu summary{height:28px;width:28px;min-width:28px;padding:7px;border-radius:9px;display:grid;place-items:center}
.accent-dot{width:14px;height:14px;border-radius:58% 42% 54% 46% / 46% 55% 45% 54%;transform:rotate(-7deg)}
.icon-button{height:44px;min-width:44px;width:44px;border-radius:8px;color:var(--color-secondary)}
.icon-button svg{width:20px;height:20px}.icon-button:hover{background:var(--color-hover);color:var(--color-text)}
.header-saved{display:flex;align-items:center;justify-content:center;gap:5px;width:61px;font-size:13px;line-height:20px;color:var(--color-secondary);padding:7px 0;border-radius:8px;flex:none}
.header-saved svg{width:14px;height:14px}.header-saved:hover{background:var(--color-surface);color:var(--color-text)}
.suggestions{font-size:13px;z-index:60}.suggestions a{font-size:13px}.mobile-toggle,.mobile-nav{display:none!important}
.catalog-layout{width:100%;max-width:1540px;margin:0 auto;padding:28px 32px 96px;grid-template-columns:156px minmax(0,1fr);gap:28px;align-items:start}
.catalog-page .group-tabs{display:block;width:100%;min-width:0;position:sticky;top:var(--header-height);z-index:40;margin:22px 0 0;padding:10px 0;border:0;overflow:visible;isolation:isolate;background:transparent}
.catalog-page .group-tabs:before{content:'';position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--color-bg) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);box-shadow:0 2px 8px var(--color-shadow);opacity:0;transition:opacity .2s var(--ease)}
.catalog-page .group-tabs.is-stuck:before{opacity:1}
.group-tab-list{display:flex;width:100%;min-width:0;padding:0 32px;align-items:center;flex-wrap:wrap;gap:5px;min-height:40px}
.catalog-page .group-tab{min-height:32px;padding:5px 10px;border-radius:8px;font-size:12.5px;line-height:1.3;gap:6px;transition:color .18s ease,background-color .18s ease,transform .18s var(--ease)}
.catalog-page .group-tab span{font:450 11px/1.3 var(--font-body);color:var(--color-muted)}
.catalog-page .group-tab.selected{font-weight:650;background:var(--color-accent-soft);color:var(--color-accent)}
.catalog-page .group-tab.selected span{color:inherit;opacity:.72}.catalog-page .group-tab.selected:after{display:none}
.catalog-page .group-tab:hover{background:var(--color-surface);color:var(--color-text)}
.catalog-page .group-tab.selected:hover{background:var(--color-accent-soft);color:var(--color-accent)}
.catalog-page .group-tab:active{transform:translateY(1px);background:var(--color-hover)}
.catalog-page .sidebar{top:calc(var(--header-height) + 70px);padding:32px 0 0;max-height:calc(100dvh - var(--header-height) - 90px);scrollbar-width:none}
.catalog-page .sidebar::-webkit-scrollbar{display:none}
.catalog-page .role-list{display:flex;flex-direction:column;gap:3px}
.catalog-page .role-item{min-height:36px;padding:7px 11px;font-size:12.5px;font-weight:400;line-height:1.7;justify-content:flex-start;gap:0;border-radius:8px;transition:background-color .2s var(--ease),color .2s var(--ease)}
.catalog-page .role-item:hover{background:var(--color-surface);color:var(--color-text)}
.catalog-page .role-item.selected{background:var(--color-hover);color:var(--color-text);font-weight:600}
.catalog-content{min-width:0}.catalog-heading{margin:14px 0 28px}
.catalog-heading h1{font-size:32px;font-weight:700;line-height:1.35;letter-spacing:-.03em}
.term-section{scroll-margin-top:calc(var(--header-height) + 72px)}
.category-title{display:flex;align-items:baseline;gap:10px;margin:28px 0 14px;font-size:18px;font-weight:600;line-height:1.5;letter-spacing:0}
.category-title .category-name{min-width:0;overflow-wrap:anywhere}.category-title .category-count{flex:none;color:var(--color-muted);font-size:11.5px;font-weight:400;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}
.catalog-page .term-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.term-card{display:flex;flex-direction:column;position:relative;padding:24px 24px 18px;border-radius:12px;overflow:visible;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.term-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--color-border-hover)}
.term-card:active{transform:translateY(-1px) scale(.994)}

.card-main{display:flex;flex-direction:column;padding:0;height:100%;min-width:0}
.card-head{padding-right:48px;margin-bottom:4px;min-height:37.4px}
.card-head h3{font-size:22px;font-weight:600;line-height:1.7;letter-spacing:.1px;overflow-wrap:anywhere}
.card-head h3 span{display:inline;margin-left:6px;font-size:17px;font-weight:500;color:var(--color-accent)}
.term-card .card-phrase{position:relative;display:block;height:auto;min-height:0;padding-left:22px;margin:0 0 16px;font-size:16px;line-height:1.65;overflow:visible}
.card-phrase:before{content:'“';position:absolute;left:0;top:-1px;font-size:24px;line-height:1.2;font-weight:700;color:var(--color-accent)}
.term-card .diagram{height:auto;min-height:0;aspect-ratio:16/9;width:100%;flex:none;margin-top:auto;padding:16px;border-radius:8px;background:color-mix(in srgb,var(--color-surface) 92%,var(--color-border))}
.term-card .favorite{top:25px;right:25px;width:36px;height:36px;border:1px solid transparent;border-radius:999px;color:var(--color-muted);transition:color .18s ease,background-color .18s ease}
.favorite svg{width:19px;height:19px;stroke-width:1.5}.favorite:hover{background:var(--color-hover);color:var(--color-accent)}
.favorite:active{background:var(--color-accent-soft)}.favorite.selected{color:var(--color-accent)}.favorite.selected svg{fill:currentColor}
.favorite:focus-visible,.card-main:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.catalog-note{margin:40px 0 0;font-size:12px;color:var(--color-muted)}
@media(max-width:1320px) and (min-width:1121px){.header-search{width:min(320px,26vw);flex-basis:320px}}
@media(max-width:1100px){.group-tab-list{padding-left:24px;padding-right:24px}.catalog-layout{grid-template-columns:140px minmax(0,1fr);gap:20px;padding-left:24px;padding-right:24px}.catalog-page .term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){
 .top-inner{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:40px 40px;gap:6px 10px;padding:10px 16px 11px}
 .logo{grid-row:1;grid-column:1;font-size:16px}.logo-mark{width:20px;height:20px}.logo-word,.header-saved{display:none}
 .nav-right{grid-row:1;grid-column:2;width:100%;margin:0;gap:4px}.header-search{flex:1 1 auto;width:auto;height:36px;margin:0;padding:0 8px}.header-search input{font-size:16px}
 .header-controls{gap:4px}.language-menu summary{padding:6px 5px;font-size:13px}.accent-menu summary{width:28px;min-width:28px}.icon-button{width:44px;min-width:44px}
 .primary-nav{display:flex;grid-row:2;grid-column:1/-1;width:100%;min-width:0;margin:0;gap:2px;overflow-x:auto;scrollbar-width:none}
 .primary-nav::-webkit-scrollbar{display:none}.nav-link{min-height:36px;line-height:20px;padding:8px;font-size:13px;flex:none}
}
@media(max-width:960px){
 .catalog-layout{grid-template-columns:minmax(0,1fr);padding-top:20px}.catalog-page .sidebar{position:static;padding:0;max-height:none;overflow:visible;min-width:0}
 .catalog-page .role-list{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;overscroll-behavior-inline:contain}.catalog-page .role-list::-webkit-scrollbar{display:none}
 .catalog-page .role-item{width:auto;min-height:34px;flex:none;white-space:nowrap;padding:7px 11px;font-size:12.5px}
}
@media(max-width:720px){
 .catalog-layout{padding:20px 16px 64px;gap:20px}.catalog-page .group-tabs{margin-top:8px;padding:8px 0}.group-tab-list{padding-left:16px;padding-right:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain}.group-tab-list::-webkit-scrollbar{display:none}
 .catalog-page .group-tab{min-height:31px;padding:5px 9px;flex:none}.catalog-page .term-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .catalog-heading{margin:4px 0 24px}.catalog-heading h1{font-size:26px}.category-title{font-size:17px;margin:24px 0 12px}.category-title .category-count{font-size:11px}
 .term-card{padding:18px 16px 16px}.card-head{padding-right:44px;min-height:36px;margin-bottom:4px}.card-head h3{font-size:clamp(18px,5vw,22px);line-height:1.35}.card-head h3 span{font-size:16px}
 .term-card .card-phrase{font-size:15px;line-height:1.65;margin:0 0 14px}.term-card .favorite{top:19px;right:17px}
 .term-section{scroll-margin-top:calc(var(--header-height) + 70px)}
 .term-card .example-copy strong{font-size:19px}.term-card .example-copy p{font-size:10px}.term-card .demo-button{font-size:10px}
}
@media(hover:none){.term-card:hover{transform:none;box-shadow:none;border-color:var(--color-border)}}
@media(prefers-reduced-motion:reduce){.term-card:active,.logo:hover .logo-mark{transform:none}}
/* Reset inherited MVP header dimensions so the capsule and controls match the reference. */
.topbar{z-index:50}.top-inner{min-height:0}.logo-mark{margin-right:0}.logo>span.logo-word{margin-left:0;font-weight:790}
.header-search{border:1px solid var(--color-border)}.header-search>span{position:static;color:var(--color-muted)}
.header-search input{height:100%;border:0;border-radius:0;background:transparent;padding:0;outline:0;box-shadow:none}
.header-search input:focus{outline:0;box-shadow:none}.header-search:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-soft)}
.menu summary{min-height:0}.accent-menu summary{min-height:28px}

html:has(.catalog-page){scroll-padding-top:var(--header-height)}
.term-section{scroll-margin-top:72px}
@media(max-width:720px){.term-section{scroll-margin-top:70px}}
.catalog-page .role-item{font-size:13px;line-height:1.3;letter-spacing:normal}
.catalog-page .role-item.selected{background:var(--color-accent-soft);color:var(--color-accent);font-weight:650}

/* Term reading view uses the reference's narrow, single-column reading rhythm. */
.term-detail{max-width:980px;padding:36px 32px 96px}
.term-detail .breadcrumbs{min-height:30px;margin-bottom:39px;font-size:13px;line-height:20px}
.term-detail .detail-heading{align-items:center;gap:20px}.term-detail .detail-heading h1{font-size:30px;line-height:1.7;font-weight:700;letter-spacing:-.025em}
.term-detail .english-name{display:inline;margin:0 0 0 8px;color:var(--color-accent);font-size:21px;line-height:1.7;font-weight:500;letter-spacing:.1px}
.term-detail .detail-layout{display:block;max-width:none;margin-top:10px}.term-detail .detail-toc{display:none}
.term-detail .detail-body blockquote{position:relative;margin:0 0 14px;border:0;border-radius:8px;padding:14px 16px 14px 42px;background:var(--color-accent-soft);font-size:15px;line-height:1.7}
.term-detail .detail-body blockquote:before{content:'“';position:absolute;left:15px;top:11px;font-size:24px;line-height:1.2;color:var(--color-accent);font-weight:700}
.term-detail .detail-body blockquote span{font-size:12px;line-height:1.7;margin-bottom:4px;color:var(--color-accent);font-weight:600}
.term-detail .definition{font-size:16px;line-height:1.8;margin-bottom:32px}
.term-detail .detail-body>section{margin-top:36px;padding-bottom:0;border:0}.term-detail .detail-body>section h2{font-size:26px;line-height:1.7;font-weight:650;margin-bottom:8px}
.term-detail .detail-body>section p{font-size:15px;line-height:1.8}.term-detail .request-block{background:var(--color-accent-soft);border:0;padding:22px 24px}
@media(max-width:720px){.term-detail{padding:24px 16px 64px}.term-detail .breadcrumbs{margin-bottom:28px}.term-detail .detail-heading h1{font-size:24px;line-height:1.5}.term-detail .english-name{font-size:18px}.term-detail .detail-heading{align-items:flex-start}.term-detail .detail-layout{margin-top:16px}.term-detail .detail-body>section h2{font-size:22px}.term-detail .request-block{padding:18px 20px}}
/* Expanded glossary: real definitions replace generic illustrations where no term-specific demo exists. */
:root{--finder-height:60px}
.catalog-page .sidebar{top:calc(var(--header-height) + var(--finder-height) + 10px)}
.catalog-page .sidebar-title{display:block;padding:0 11px;margin:0 0 9px;color:var(--color-muted);font-size:11px;font-weight:500;line-height:1.5}
.term-section{scroll-margin-top:calc(var(--finder-height) + 12px)}
.reading-preview{align-items:stretch;text-align:left;gap:12px}
.concept-topic{font-size:10px;line-height:1.4;color:var(--color-accent);align-self:flex-start;border-left:2px solid var(--color-accent);padding-left:7px}
.reading-preview .concept-definition{font-size:12px;line-height:1.7;color:var(--color-secondary);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.concept-caption{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--color-muted);margin-top:auto;border-top:1px solid var(--color-line);padding-top:8px}
.reading-preview.full{height:auto;min-height:220px;padding:24px;gap:20px}
.reading-preview.full .concept-topic{font-size:13px}.concept-steps{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}.concept-steps>div>span{display:block;font-size:12px;color:var(--color-muted);margin-bottom:8px}.concept-steps p{font-size:15px;line-height:1.8}
.source-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.source-links a{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--color-border);border-radius:8px;font-size:13px}.source-links a:hover{background:var(--color-surface);color:var(--color-accent)}.source-links svg{width:15px;height:15px}
@media(max-width:720px){.concept-steps{grid-template-columns:1fr;gap:20px}.reading-preview.full{padding:20px}.reading-preview .concept-definition{font-size:12px}.term-section{scroll-margin-top:calc(var(--finder-height) + 14px)}}

/* Selected geometric symbol and complete reference wordmark. */
.logo{min-height:40px}
.brand-lockup{display:block;width:110px;height:30px;object-fit:contain;flex:none}
.brand-dark,.brand-symbol{display:none}
.footer .footer-brandline{display:flex;align-items:center;gap:12px}
.footer-brand{display:inline-flex;align-items:center;flex:none;min-height:32px}
.footer-brand .brand-lockup{width:90px;height:24px}
[data-theme="dark"] .brand-light{display:none}
[data-theme="dark"] .brand-dark{display:block}
@media(max-width:1023px){
 .logo{width:24px}
 html[data-theme] .logo .brand-lockup{display:none}
 .logo .brand-symbol{display:block;width:18px;height:18px;flex:none}
}
@media(max-width:720px){.footer .footer-brandline{flex-direction:column;align-items:flex-start;gap:8px}.footer .footer-brandline .muted{margin-top:0}}

/* Methods use the same catalog rhythm, with text guides in place of term diagrams. */
.method-intro{margin-top:12px;font-size:15px;line-height:1.8;max-width:680px}
.method-search{display:flex;align-items:center;gap:10px;width:100%;max-width:620px;min-height:42px;margin:20px 0 28px;padding:5px 6px 5px 14px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg)}
.method-search:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-soft)}
.method-search>svg{width:16px;height:16px;color:var(--color-muted)}
.method-search input{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:14px}
.method-search button,.method-clear{min-height:30px;padding:4px 13px;border-radius:999px;font-size:12px;white-space:nowrap}
.method-search button{background:var(--color-hover);color:var(--color-text)}
.method-search button:hover,.method-clear:hover{background:var(--color-accent-soft);color:var(--color-accent)}
.method-clear{color:var(--color-secondary)}
.method-results{font-size:13px;margin:-12px 0 20px;color:var(--color-muted)}
.method-kicker{font-size:11px;color:var(--color-muted);margin-bottom:10px}
.method-card .card-head{padding-right:0;margin-bottom:12px}
.method-card .card-head h3{line-height:1.45}
.method-card .card-head h3 span{display:block;margin:5px 0 0;font-size:13px;line-height:1.6;font-weight:400;color:var(--color-secondary)}
.method-card .card-phrase{font-size:15px}
.method-summary{padding:13px 14px;margin:0 0 20px;background:var(--color-surface);border-radius:8px}
.method-summary>span{display:block;font-size:11px;color:var(--color-muted);margin-bottom:5px}
.method-summary p{font-size:13px;line-height:1.8;color:var(--color-secondary)}
.method-card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;font-size:12px;color:var(--color-muted)}
.method-card-foot svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.method-card:hover .method-card-foot{color:var(--color-accent)}
.method-card:hover .method-card-foot svg{transform:translateX(3px)}
.methods-page .catalog-note a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.method-detail .source-links a{white-space:normal;overflow-wrap:anywhere}
.method-copy{margin-top:18px}
@media(max-width:1120px) and (min-width:1024px){.primary-nav{margin-left:4px;gap:2px}.nav-link{padding-left:8px;padding-right:8px}.nav-right{gap:10px}.header-controls{gap:8px}}
@media(max-width:720px){.method-intro{font-size:14px}.method-search{margin:18px 0 24px}.method-search input{font-size:16px}.method-card .card-head h3 span{font-size:12px}.method-card .card-phrase{font-size:15px}.method-summary{margin-bottom:16px}.method-detail .bottom-action .button{font-size:13px}}
@media(prefers-reduced-motion:reduce){.method-card:hover .method-card-foot svg{transform:none}}

/* The glossary sidebar has no redundant heading; align its first item with the page title. */
@media(min-width:961px){.terms-page .sidebar{padding-top:14px;max-height:calc(100dvh - var(--header-height) - var(--finder-height) - 20px)}}