.skill-site-header{background:rgba(6,21,40,.97);border-bottom-color:rgba(232,240,247,.18)}
[hidden]{display:none!important}
.skill-site-header .desktop-nav a[aria-current="page"]{color:var(--cyan-300)}
.skill-account-button,.skill-share-header{border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--mist-100);padding:9px 12px;font:600 10px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.skill-account-button{background:var(--cyan-300);border-color:var(--cyan-300);color:var(--navy-950)}
.skill-logout-button{border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--mist-100);padding:9px 12px;font:600 10px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.skill-share-header:hover,.skill-account-button:hover{transform:translateY(-1px)}
.mobile-menu button{width:100%;border:0;border-top:1px solid var(--line-light);background:transparent;color:var(--mist-100);padding:18px 0;text-align:left;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.detail-body .skill-detail{padding-top:146px}
@media(max-width:1050px){.skill-share-header{display:none}}
@media(max-width:760px){.skill-account-button,.skill-logout-button{display:none}.detail-body .skill-detail{padding-top:122px}}

/* Skill Hub uses a learning-library scale rather than a campaign-page scale. */
.hub-hero{min-height:520px}
.hero-copy h1{font-size:clamp(48px,6.5vw,82px);line-height:.9}
.directory-head h2{font-size:clamp(34px,4.5vw,54px)}
.skill-card h3{font-size:28px;line-height:1.08;margin:34px 0 16px}
.manifesto blockquote{font-size:clamp(28px,4vw,48px)}
.detail-body .skill-detail{padding-top:116px}
@media(max-width:760px){.detail-body .skill-detail{padding-top:96px}.hero-copy h1{font-size:44px}.hub-hero{padding-top:60px;padding-bottom:60px}}
.hub-dialog .social-divider{display:flex;align-items:center;gap:12px;margin:22px 0 13px;color:#6a7b88;font-size:10px;letter-spacing:.11em;text-transform:uppercase}.hub-dialog .social-divider::before,.hub-dialog .social-divider::after{content:"";height:1px;background:var(--line);flex:1}.hub-dialog .social-login-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hub-dialog .social-option{min-width:0}.hub-dialog .google-option{grid-column:1/-1}.hub-dialog .social-provider{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;min-height:48px;margin:0!important;border-radius:3px;text-align:center;font-weight:650;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.hub-dialog .social-provider img{width:20px;height:20px;flex:0 0 20px}.hub-dialog .google-provider{background:#fff;border:1px solid #b8c8d4;box-shadow:0 4px 14px rgba(7,26,46,.08);color:#172b3b}.hub-dialog .google-provider:not(:disabled):hover{border-color:#4285f4;box-shadow:0 7px 18px rgba(66,133,244,.16);transform:translateY(-1px)}.hub-dialog .github-provider{background:#15202b;color:#fff;border-color:#15202b}.hub-dialog .microsoft-provider{background:#fff;color:#162638;border-color:#b8c8d4}.hub-dialog .social-provider:not(:disabled):hover{transform:translateY(-1px)}.hub-dialog .social-provider.is-unavailable{opacity:.48;border-style:dashed;cursor:not-allowed;box-shadow:none;filter:saturate(.25)}.hub-dialog [data-social-status]{margin:6px 2px 0;color:#8a5a37;font-size:10px;line-height:1.35}.hub-dialog [data-password-help]{margin:7px 0 0;color:#60727c;font-size:11px;line-height:1.45}@media(max-width:520px){.hub-dialog .social-login-grid{grid-template-columns:1fr}.hub-dialog .google-option{grid-column:auto}}

/* Account controls — a compact identity capsule instead of generic header buttons. */
.skill-account-cluster{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid rgba(143,194,255,.2);border-radius:999px;background:rgba(4,17,34,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .2s ease,background .2s ease}
.skill-account-button,.skill-logout-button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:0 13px;font:650 10px/1 var(--body);letter-spacing:.07em;text-transform:none;white-space:nowrap;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease}
.skill-account-button{max-width:190px;color:var(--navy-950);background:var(--cyan-300);box-shadow:0 5px 18px rgba(111,224,213,.16)}
.skill-account-button [data-account-label]{overflow:hidden;text-overflow:ellipsis}
.account-symbol{width:18px;height:18px;position:relative;flex:0 0 18px;border-radius:50%;background:var(--navy-950)}
.account-symbol::before{content:"";position:absolute;top:4px;left:7px;width:4px;height:4px;border:1px solid var(--cyan-300);border-radius:50%}
.account-symbol::after{content:"";position:absolute;bottom:3px;left:4px;width:8px;height:4px;border:1px solid var(--cyan-300);border-radius:7px 7px 4px 4px}
.skill-account-button:hover{background:#94f1e7;box-shadow:0 8px 24px rgba(111,224,213,.24);transform:translateY(-1px)}
.skill-account-button.is-member{color:var(--mist-100);background:rgba(143,194,255,.09);box-shadow:none;cursor:default}
.skill-account-button.is-member .account-symbol{background:var(--cyan-300)}
.skill-account-button.is-member .account-symbol::before,.skill-account-button.is-member .account-symbol::after{border-color:var(--navy-950)}
.skill-logout-button{color:rgba(232,240,247,.72);background:transparent;padding:0 11px}
.logout-symbol{width:15px;height:15px;position:relative;flex:0 0 15px}
.logout-symbol::before{content:"";position:absolute;inset:2px 6px 2px 1px;border:1px solid currentColor;border-right:0;border-radius:3px 0 0 3px}
.logout-symbol::after{content:"↗";position:absolute;right:-1px;top:-2px;font-size:13px;line-height:1}
.skill-logout-button:hover{color:#fff;background:rgba(255,255,255,.09);transform:none}
.skill-logout-button:disabled{opacity:.45;cursor:wait}

/* Member access — restrained editorial panel with strong form hierarchy. */
.hub-dialog[data-auth-dialog]{width:min(548px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:visible;border-radius:24px;outline:none}
.hub-dialog[data-auth-dialog]::backdrop{background:rgba(2,10,20,.76);backdrop-filter:blur(12px) saturate(.8)}
.hub-dialog[data-auth-dialog] form{max-height:calc(100dvh - 28px);overflow:auto;padding:34px 38px 36px;border:1px solid rgba(143,194,255,.32);border-radius:24px;background:linear-gradient(145deg,#fbfdfc 0%,#f2f7f7 100%);box-shadow:0 30px 90px rgba(1,9,19,.46),0 1px 0 rgba(255,255,255,.75) inset}
.hub-dialog[data-auth-dialog] form::before{content:"";display:block;width:44px;height:4px;margin-bottom:25px;border-radius:99px;background:linear-gradient(90deg,var(--cyan-300) 0 68%,var(--navy-900) 68% 100%)}
.hub-dialog[data-auth-dialog] form>p{margin:0 42px 8px 0;color:#597080;font-size:9px;letter-spacing:.2em}
.hub-dialog[data-auth-dialog] h2{margin:0 45px 22px 0;font-family:var(--serif);font-size:34px;font-weight:500;line-height:1.08;letter-spacing:-.025em;text-transform:none;color:var(--night)}
.hub-dialog[data-auth-dialog] .close{top:18px;right:18px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid rgba(11,33,55,.13);border-radius:50%;color:#496274;background:rgba(255,255,255,.65);font:300 22px/1 var(--body);transition:transform .2s ease,background .2s ease,color .2s ease}
.hub-dialog[data-auth-dialog] .close:hover{color:var(--night);background:#fff;transform:rotate(8deg)}
.hub-dialog[data-auth-dialog] .auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 21px;padding:4px;border:0;border-radius:12px;background:#e5edee}
.hub-dialog[data-auth-dialog] .auth-tabs button{min-height:38px;margin:0;padding:0 12px;border:0;border-radius:9px;color:#637782;background:transparent;font-size:11px;font-weight:650;letter-spacing:.02em;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.hub-dialog[data-auth-dialog] .auth-tabs button.active{color:var(--night);background:#fff;box-shadow:0 3px 12px rgba(7,26,46,.09)}
.hub-dialog[data-auth-dialog] :is(button,input):focus-visible{outline:2px solid #348eaa;outline-offset:2px}
.hub-dialog[data-auth-dialog] label{margin:14px 0 0;color:#324c5d;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hub-dialog[data-auth-dialog] input{height:50px;margin-top:7px;padding:0 14px;border:1px solid rgba(11,33,55,.17);border-radius:10px;color:var(--night);background:rgba(255,255,255,.88);font-size:14px;letter-spacing:0;text-transform:none;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.hub-dialog[data-auth-dialog] input:hover{border-color:rgba(11,33,55,.3);background:#fff}
.hub-dialog[data-auth-dialog] input:focus{border-color:#348eaa;background:#fff;box-shadow:0 0 0 3px rgba(99,223,202,.18)}
.hub-dialog[data-auth-dialog] .submit{height:51px;margin-top:20px;padding:0 18px;border-radius:11px;background:var(--night);font-size:11px;font-weight:700;letter-spacing:.08em;box-shadow:0 10px 22px rgba(7,26,46,.18);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.hub-dialog[data-auth-dialog] .submit:hover{background:#0c2a48;box-shadow:0 14px 28px rgba(7,26,46,.24);transform:translateY(-1px)}
.hub-dialog[data-auth-dialog] .social-divider{margin:23px 0 14px;color:#71848d;font-size:9px;letter-spacing:.13em}
.hub-dialog[data-auth-dialog] .social-login-grid{gap:9px}
.hub-dialog[data-auth-dialog] .social-provider{min-height:49px;border-radius:10px;font-size:11px;font-weight:650;box-shadow:none}
.hub-dialog[data-auth-dialog] .social-provider img{width:19px;height:19px;flex-basis:19px}
.hub-dialog[data-auth-dialog] .google-provider,.hub-dialog[data-auth-dialog] .microsoft-provider{border-color:rgba(11,33,55,.17);background:#fff}
.hub-dialog[data-auth-dialog] .github-provider{background:#17212b;border-color:#17212b}
.hub-dialog[data-auth-dialog] .social-provider:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(7,26,46,.11)}
.hub-dialog[data-auth-dialog] [data-auth-message]{min-height:15px;margin:13px 2px 0;color:#a34335;font-size:11px;line-height:1.45}
.hub-dialog[data-auth-dialog] [data-password-help]{margin-top:6px;color:#627681;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none}

@media(max-width:860px){.skill-account-cluster{display:none}}
@media(max-width:520px){.hub-dialog[data-auth-dialog] form{padding:28px 22px 26px;border-radius:18px}.hub-dialog[data-auth-dialog]{border-radius:18px}.hub-dialog[data-auth-dialog] h2{font-size:30px}.hub-dialog[data-auth-dialog] .social-login-grid{grid-template-columns:1fr}.hub-dialog[data-auth-dialog] .google-option{grid-column:auto}}